简约模式，新增分类单独拖动，并且更新位置大小

.env

@@ -14,7 +14,8 @@ VUE_APP_APPID=com.menu.test
 VUE_APP_API_VERSION=V1
 
 #主窗口宽高（简约）
-VUE_APP_mainW=1000
+#VUE_APP_mainW=1000
+VUE_APP_mainW=619
 VUE_APP_mainH=70
 
 #极简模式-宽高

src/assets/css/common.less

@@ -44,3 +44,15 @@
     font-weight: 500;
     color: #fff;
 }
+
+.page_wrap {
+    box-sizing: border-box;
+    border-radius: 8px;
+    border: 1px solid rgba(135, 183, 255, 0.44);
+    border-right-color: rgba(0,148,255,0.5);
+    border-left-color: rgba(0,148,255,0.5);
+    width: 100%;
+    height: 100%;
+    font-size: 24px;
+    background: linear-gradient(180deg, rgba(10,37,91,0.3) 0%, #05173A 100%);
+}
\ No newline at end of file

src/main/events/ipc.js

@@ -5,6 +5,7 @@ const { exec, execSync } = require('child_process');
 import SoftList from '../plugins/softList';
 import categoryPlugin from '../plugins/category';
 import softListPlugin from '../plugins/softList';
+import cateWinPlugin from '../plugins/cateWin';
 
 class IpcEvents {
   create (appManager) {
@@ -15,6 +16,7 @@ class IpcEvents {
     this.softList = new SoftList(this.windowManager.mainWindow)
     this.categoryPlugin = new categoryPlugin(this.windowManager.mainWindow)
     this.softListPlugin = new softListPlugin(this.windowManager.mainWindow)
+    this.cateWinPlugin = new cateWinPlugin(this.windowManager.mainWindow)
 
     /* 翻译器函数
     Translator function */
@@ -67,7 +69,8 @@ class IpcEvents {
           height: Number( process.env.VUE_APP_UXueModeH ),
         },
         'modeJianYue': {
-          width: displayWH.width,
+          // width: displayWH.width,
+          width: Number( process.env.VUE_APP_mainW ),
           height: Number( process.env.VUE_APP_mainH ),
         },
         'modeJiJian': {
@@ -92,6 +95,10 @@ class IpcEvents {
               width, 
               height 
             }, true);
+            //首次创建三个新窗口
+            setTimeout(() => {
+              this.cateWinPlugin.firstCreate();
+            },1500);
           }
         },
         {
@@ -101,6 +108,10 @@ class IpcEvents {
             let {width,height} = whDetail['modeJiJian'];
             event.sender.send('context-menu-command', 'modeJiJian');
             this.store.set("currentMode", "modeJiJian");
+
+            // 隐藏分类窗口
+            this.cateWinPlugin.hideAllWin();
+
             this.windowManager.mainWindow.win.setBounds({ 
               x: window_left_distance, 
               y: ( Number(displayWH.height) - height - window_bottom_distance), 
@@ -128,6 +139,8 @@ class IpcEvents {
               height 
             }, true);
             this.store.set("currentMode", "modeUXue");
+            // 隐藏分类窗口
+            this.cateWinPlugin.hideAllWin();
           }
         }
       ]

src/main/plugins/cateWin.js

@@ -7,16 +7,73 @@ class cateWin {
     }
     /* 窗口初始化跟随，mainwindow */
     /* 新建分类窗口 */
-    createWin() {
+    createWin({ cateId,index=0, baseX, baseY, width, offsetX },isFirst = false) {
+        // let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
+        let cateWinList = this.getAllWindows();
+        /* 无需创建新窗口，当主窗口上无分类数据时 */
+        // if(cateWinList.length < 6) {
+        //     let mainEl = this.mainWindow.getWinOf("mainWindow");
+        //     if(mainEl) mainEl.win.webContents.cateId = cateId;
+        //     return;
+        // }
+        // 首次创建，仅限于小于三个窗口
+        if(isFirst && cateWinList.length >= 3) return;
+        console.log('创建',index,cateId, width)
+        let x = baseX || 0;
+        let y = baseY || 0;
         this.mainWindow.createWindow({
-            x: 0,
-            y: 100, 
-            width: JiJianModeW,
-            height: JiJianModeH,
+            x: x + offsetX + index*(12),
+            y: y, 
+            width: width || 20,
+            height: Number( process.env.VUE_APP_mainH ),
             webType: this.webType, //简约模式的窗口
+            id:cateId,
+            cateId, //分类id
+            title: "分类窗口",
+            route: "/category/"+cateId,
+            resizable: false,
+            modal: false,
+            visible: 'show'
         })
     }
 
+    /* 首次创建新三个 */
+    firstCreate() {
+        let {width,height,x,y} = this.getMainBounds();
+        let cateWinList = this.getAllWindows();
+        let categoryList = this.getCategoryList();
+        if(cateWinList.length>=3) {
+            // 如果隐藏，则显示
+            cateWinList.forEach(v => {
+                if(!v.isVisible()) v.show();
+            })
+            return;
+        }
+        // 偏移
+        let offsetX = 0;
+        let len = 0;
+        let currentWidth = 0;
+        categoryList.forEach((item,index) => {
+            if(index == 0) {
+                // 将id挂载到主窗口
+                return;
+            }
+            console.log('item', item)
+            len = item.softList && item.softList.length || 0;
+            console.log(len)
+            currentWidth = item.softList && len ? (len * 50 + (len-1)*24 + 80) : 20;
+            this.createWin({ 
+                cateId:item.cateId,
+                index,
+                baseX: Number(width) + Number(x),
+                baseY: Number(y),
+                width:currentWidth,
+                offsetX,
+            });
+            offsetX = offsetX + currentWidth;
+        });
+    }
+
     /* 获取简约模式-所有分类的窗口 */
     getAllWindows() {
         let windowList = this.mainWindow.getAllWindows();
@@ -24,6 +81,74 @@ class cateWin {
         let newWinList = windowList.filter(v => v.webContents.webType === this.webType);
         return newWinList;
     }
+
+    /* 获取主窗口 */
+    getMainBounds() {
+        let main = this.mainWindow.main;
+        // .getBounds
+        let {width,height,x,y} = main.getBounds();
+        return {width,height,x,y};
+    }
+
+    /* 隐藏所有-分类窗口 */
+    hideAllWin() {
+        let winList = this.getAllWindows();
+        winList.forEach(v => {
+            v.hide();
+        })
+    }
+
+    /* 窗口位置，大小调整 */
+    resizeAndPosition({cateId, softList}) {
+        let cateList = this.getCategoryList();
+        let pList = [];
+        // this.mainWindow.getWinCateOf();
+        cateList.forEach(cItem => {
+            let currentWin = this.mainWindow.getWinCateOf(cItem.id);
+            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)
+        let offsetX = 0;
+        let currentWidth = 0;
+        let len = 0;
+        pList.forEach(item => {
+            len = item.softList && item.softList.length || 0;
+            currentWidth = item.softList && len ? (len * 50 + (len-1)*24 + 80) : 20;
+            item.x = offsetX || item.x;
+            item.width = currentWidth;
+            offsetX = item.x + currentWidth + 12;
+            if(item.win) item.win.setBounds( {
+                x: item.x,
+                width: item.width
+            } );
+        })
+        console.log(pList)
+    }
+
+    /* 获取分类列表 */
+    getCategoryList() {
+        return this.store.get(process.env.VUE_APP_CATENAME) || [];
+    }
+
+    /* 获取某个分类id详情 */
+    getCateDetail({cateId}) {
+        let categoryList = this.getCategoryList();
+        let hasIn = categoryList.findIndex(v => v.id == cateId);
+        if(hasIn == -1) return null;
+        return categoryList[hasIn]
+    }
+
+    /* 获取软件列表 */
+    getAppListOfCate({cateId}) {
+        let detail = this.getCateDetail({cateId});
+        if(detail == null) return [];
+        return detail.softList || [];
+    }
 }
 
 export default cateWin;
\ No newline at end of file

src/main/plugins/category.js

+import cateWinPlugin from '../plugins/cateWin';
 class category {
     constructor (mainWindow) {
         this.mainWindow = mainWindow;
         this.store = this.mainWindow.store;
+
+        this.cateWinPlugin = new cateWinPlugin(mainWindow)
     }
 
     // 重置列表
@@ -80,13 +83,23 @@ class category {
         return categoryList[hasIn]
     }
 
-    /* 更新分类列表 */
+    /* 更新分类列表，新增 */
     updateCategory({id, detail, sender}) {
         let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
         let hasIn = categoryList.findIndex(v => v.id == id);
         // console.log('hasIn', hasIn)
+        console.log('分类id',id)
         if(hasIn == -1) return null;
 
+        // 修改窗口大小
+        let cateWin = this.mainWindow.getWinCateOf(id);
+        if(cateWin != null) {
+            // cateWin.setBounds({
+            //     width:352,
+            // });
+            this.cateWinPlugin.resizeAndPosition({cateId:id, softList:detail.softList});
+        }
+
         categoryList[hasIn] = detail;
 
         this.store.set(process.env.VUE_APP_CATENAME, categoryList);

src/main/windows/mainWindow.js

@@ -14,21 +14,25 @@ const store = new Store({
         name:'备课资源',
         id:'bk001',
         softIds:[], //当前分类下的软件
+        cateId:'bk001',
       },
       {
         name:'教学工具',
         id:'jx002',
         softIds:[],
+        cateId:'jx002',
       },
       {
         name:'课后练习',
         id:'kh003',
         softIds:[],
+        cateId:'kh003',
       },
       {
         name:'教务管理',
         id:'jw004',
         softIds:[],
+        cateId:'jw004',
       },
     ], 
   },
@@ -134,6 +138,16 @@ class MainWindow {
     return targetIndex != -1 ? winList[targetIndex] : null;
   }
 
+  /* 获取分类窗口 */
+  getWinCateOf(id) {
+    let winId = "";
+    let keys = Object.keys(this.group);
+    let targetIndex = keys.findIndex(v => this.group[v].route === '/category/'+id);
+    if(targetIndex != -1) winId = keys[targetIndex];
+    if(winId) return this.getWindow(Number(winId));
+    return null;
+  }
+
   // 获取全部窗口
   getAllWindows() {
     return BrowserWindow.getAllWindows()
@@ -141,7 +155,6 @@ class MainWindow {
 
   createWindow (options = {isMainWin: true}) {
     let args = Object.assign({}, windowsCfg, options);
-
     // if (this.win) {
     //   console.warn('window is already exists!')
     //   return
@@ -171,6 +184,7 @@ class MainWindow {
     if(args.x != undefined) opt.x = args.x;
     if(args.y != undefined) opt.y = args.y;
     if(args.backgroundColor != undefined) opt.backgroundColor = args.backgroundColor;
+    if(args.id != undefined) opt.id = args.id;
 
     console.log(opt)
     let win = new BrowserWindow(opt)
@@ -196,6 +210,7 @@ class MainWindow {
     }
     args.id = win.id
     win.webContents.webType = args.isMainWin ? 'mainWindow' : (args.webType || '');
+    if(args.cateId) win.webContents.cateId = args.cateId;
     // const win = new BrowserWindow({
     //   width: 1000,
     //   // height: 40,
@@ -253,7 +268,8 @@ class MainWindow {
       event.preventDefault();
       // console.log(`Window ${win.id} lost focus webType:${win.webContents.webType}`)
       // 如果没有聚焦窗口存在，则隐藏app 管理页
-      if(win.webContents.webType === 'appManage' || win.webContents.webType === 'mainWindow') {
+      // if(win.webContents.webType === 'appManage' || win.webContents.webType === 'mainWindow') {
+      if(win.webContents.webType) {
         let focusWin = BrowserWindow.getFocusedWindow();
         if(focusWin != null) return;
         console.log('需要隐藏')

src/renderer/components/Dockmode/one.vue

@@ -7,7 +7,7 @@
       <img src="~@/assets/yunpingtai.png" alt="" class="yun_img disable-drag">
     </div>
     <div  v-if="mode === 'modeJianYue'" class="group_list">
-      <div v-for="(cateItem, cateIndex) in cateList" 
+      <!-- <div v-for="(cateItem, cateIndex) in cateList" 
         v-show="cateItem.softList && cateItem.softList.length > 0" 
         :key="cateIndex" class="group1_wrap">
         <div v-for="(appItem, appIndex) in cateItem.softList"
@@ -18,6 +18,21 @@
           <img :src="appItem.icon" alt="" class="img disable-drag">
           <span class="app_name">{{ appItem.name }}</span>
         </div>
+      </div> -->
+      <div v-if="cateList && cateList[0]">
+        <el-scrollbar ref="scrollContainer" :vertical="false" style="width:300px;">
+            <div class="group1_wrap">
+              <div v-for="(appItem, appIndex) in cateList[0].softList"
+                :key="appIndex"
+                :data-appname="appItem.name"
+                class="app_item"
+                v-show="appIndex<5" 
+                @click="tapApp(appItem)">
+                <img :src="appItem.icon" alt="" class="img disable-drag">
+                <span class="app_name">{{ appItem.name }}</span>
+              </div>
+            </div>
+        </el-scrollbar>
       </div>
     </div>
   </div>
@@ -63,14 +78,14 @@ export default {
   overflow: hidden;
 }
 .group_list {
+  flex: 1;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .group1_wrap {
-    margin-left: 8px;
     border-radius: 6px;
-    margin-left: 8px;
-    background: rgba(0, 0, 0, .1);
+    // background: rgba(0, 0, 0, .1);
     // border: 2px solid transparent;
     // border-radius: 16px;
     // background-clip: padding-box, border-box;
@@ -93,13 +108,12 @@ export default {
   }
   .app_item {
     position: relative;
-    margin: 0 4px;
+    margin: 0 12px;
     flex-shrink: 0;
     // padding: 2px;
     width: 36px;
     height: 36px;
     border-radius: 10px;
-    // border: 1px solid rgba(255, 255, 255, .1);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -149,4 +163,11 @@ export default {
     height: 38px;
     object-fit: contain;
   }
+  /deep/.el-scrollbar__wrap {
+    overflow-x: hidden;
+    overflow: hidden !important;
+  }
+  /deep/.el-scrollbar__bar {
+    height: 0 !important;
+  }
 </style>
\ No newline at end of file

src/renderer/router/routes.js

@@ -61,16 +61,15 @@ export default [
     component: () => import('../views/manage/index.vue'),
     meta: { title: 'Manage', icon: 'example' },
     hidden: false,
-    children: [
-      // {
-      //   path: 'home',
-      //   name: 'CourseList',
-      //   component: () => import('../views/Home.vue'),
-      //   meta: {
-      //     title: 'Home' // 页签标题
-      //   }
-      // }
-    ]
+    children: []
+  },
+  {
+    path: "/category/:id",
+    name: "Category",
+    component: () => import('../views/category/index.vue'),
+    meta: { title: 'Category', icon: 'example' },
+    hidden: false,
+    children: []
   },
   { path: '*', redirect: '/404', hidden: true }
 ]
\ No newline at end of file

src/renderer/views/category/index.vue

+<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">
+        <div v-for="(appItem, appIndex) in list"
+          :key="appIndex"
+          :data-appname="appItem.name"
+          class="app_item" 
+          @click="tapApp(appItem)">
+          <img :src="appItem.icon" alt="" class="img disable-drag app-nodrag">
+          <span class="app_name">{{ appItem.name }}</span>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            id:null,
+            list:[],
+        };
+    },
+    computed: {
+        ipcRenderer() {
+        return (this.$electron && this.$electron.ipcRenderer) || {};
+        },
+    },
+    mounted() {
+        this.id = this.$route.params.id;
+        this.watchCategoryChange();
+        this.$db.onDidChange(process.env.VUE_APP_CATENAME,this.watchCategoryChange)
+    },
+    methods: {
+        tapApp(item) {
+            this.ipcRenderer.send("openApp", item);
+        },
+        handleScroll(e) {
+            const eventDelta = e.wheelDelta || -e.deltaY * 40;
+            const $scrollWrapper = this.scrollWrapper;
+            $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
+        },
+        watchCategoryChange(val) {
+            // 监听分类数据改变
+            let cateList = this.$db.get(process.env.VUE_APP_CATENAME);
+            let targetIndex = cateList.findIndex(v => v.id == this.id);
+            if(targetIndex == -1) return;
+            let detail = cateList[targetIndex];
+            if(!detail.softList) return;
+            this.list =  detail.softList;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+    .category_container {
+        min-height: 70px;
+    }
+    .group1_wrap {
+        // border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 68px;
+        box-sizing: border-box;
+    }
+    .app_item {
+        position: relative;
+        margin-left: 24px;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        padding: 5px;
+        width: 50px;
+        height: 50px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        text-align: left;
+        cursor: pointer;
+        flex-wrap: wrap;
+        transition: all 0.2s;
+        &:hover {
+            // 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;
+        // width: 36px;
+        // height: 36px;
+        height: 100%;
+        object-fit: contain;
+        
+    }
+    .app_name {
+        // display: none;
+        opacity: 0;
+        position: absolute;
+        top: -6px;
+        left: -20px;
+        border-radius: 4px;
+        padding:4px;
+        width: max-content;
+        background-color: rgba(51, 51, 51, 0.6);
+        word-break: normal;
+        font-size: 14px;
+        color: #fff;
+        z-index: 99;
+        transition: opacity .3s;
+        pointer-events: none;
+    }
+
+    /deep/.el-scrollbar__wrap {
+        overflow-x: hidden;
+        overflow: hidden !important;
+    }
+    /deep/.el-scrollbar__bar {
+        height: 0 !important;
+    }
+</style>
\ No newline at end of file