修改

src/main/plugins/category.js

@@ -77,6 +77,7 @@ class category {
 
         this.store.set('category', categoryList);
         sender.send('change-category',{detail,id});
+        this.mainWindow.main.webContents.send("category-list", categoryList);
     }
 
     // 更新分类下的软件列表
@@ -90,6 +91,7 @@ class category {
 
         this.store.set('category', categoryList);
         sender.send('remove-soft',{detail,id});
+        this.mainWindow.main.webContents.send("category-list", categoryList);
     }
 
     /* 修改分类名称 */

src/renderer/App.vue

 <template>
-  <div>
+  <div class="electron_app">
     <router-view></router-view>
   </div>
 </template>

src/renderer/components/Dockmode/one.vue

@@ -7,7 +7,21 @@
     <div v-if="mode === 'modeJiJian'" class="group1_wrap">
       <img src="~@/assets/yunpingtai.png" alt="" class="yun_img">
     </div>
-    <div v-if="mode === 'modeJianYue'" class="group1_wrap first">
+    <block  v-if="mode === 'modeJianYue'" class="group_list">
+      <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"
+          :key="appIndex"
+          :data-appname="appItem.name"
+          class="app_item" 
+          @click="tapApp(appItem)">
+          <img :src="appItem.icon" alt="" class="img">
+          <span class="app_name">{{ appItem.name }}</span>
+        </div>
+      </div>
+    </block>
+    <!-- <div v-if="mode === 'modeJianYue'" class="group1_wrap first">
       <div v-for="(appItem, appIndex) in group1"
         :data-appname="appItem.name"
         class="app_item"
@@ -42,13 +56,19 @@
         <img :src="appItem.icon" alt="" class="img">
         <span class="app_name">{{ appItem.name }}</span>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
 export default {
   props: {
+    cateList: {
+      type:Array,
+      default:() => {
+        return [];
+      }
+    },
     group1: {
       type:Array,
       default:[]
@@ -90,15 +110,10 @@ export default {
 .one_container {
   font-size: 20px;
   display: flex;
-  // justify-content: space-evenly;
   align-items: center;
   flex-wrap: wrap;
   height: 100%;
-  // border-radius: 20px;
   overflow: hidden;
-  // background-color: hsl(0, 0%, 25%);
-  // background-color: #fff;
-  // background: linear-gradient(180deg, rgba(10,37,91,0.3) 0%, #05173A 100%);
 }
 .left_main {
   box-sizing: border-box;
@@ -109,7 +124,6 @@ export default {
   flex-shrink: 0;
   padding: 0 20px 0 6px;
   width: 240px;
-  // background-color: hsl(0, 0%, 25%);
   &::after {
     position: absolute;
     content: "";
@@ -131,12 +145,15 @@ export default {
   font-weight: 500;
   color: #fff;
 }
+.group_list {
+  display: flex;
+  align-items: center;
+}
 .group1_wrap {
     margin-left: 8px;
     border-radius: 6px;
     margin-left: 8px;
     background: rgba(0, 0, 0, .1);
-    // border: 1px solid rgba(255,255,255,0.48);
     display: flex;
     align-items: center;
     justify-content: center;

src/renderer/components/Dockmode/second.vue

@@ -4,14 +4,16 @@
       <img src="~@/assets/xuchanzhongxue.png" alt="" class="left_img" @click="getFrontApp">
     </div>
     <div class="right_app" :class="['active_'+(current+1)]">
+      <el-scrollbar ref="scroll" style="height: 50px;">
         <div class="second_app_list">
           <div v-for="(item,index) in list" :key="index" class="second_app_item" @click="tapApp(item)">
             <img :src="item.icon" alt="" v-if="item.icon && item.icon.indexOf('.png') == -1" class="second_app_img">
           </div>
         </div>
+      </el-scrollbar>
       <div class="tab_group">
-        <div v-for="(item,index) in groupList" :key="index" 
-          class="tab_item" :class="{'active':current==index}"
+        <div v-for="(item,index) in fourList" :key="index" 
+          class="tab_item" :class="{'active':current==index,'disable':!item.name}"
           @click="changeTab({item:item,index:index})">
           <span class="iconfont icon_size" 
           :class="{
@@ -23,8 +25,10 @@
             'icon-beikeziyuan-xuanzhong':index==0&&current==index,
             'icon-kehoulianxi-weixuanzhong':index==2&&current!=index,
             'icon-kehoulianxi-xuanzhong':index==2&&current==index,
+            'visivle-hide':!item.name
           }"></span>
-          <span class="tab_name">{{item.name}}</span>
+          <span v-if="item.name" class="tab_name">{{item.name}}</span>
+          <span v-else class="tab_name" :class="{'visivle-hide':!item.name}">隐藏占1</span>
         </div>
       </div>
     </div>
@@ -32,6 +36,10 @@
 </template>
 
 <script>
+const cubic = value => Math.pow(value, 3);
+const easeInOutCubic = value => value < 0.5
+  ? cubic(value * 2) / 2
+  : 1 - cubic((1 - value) * 2) / 2;
 export default {
   props: {
     current: {
@@ -67,14 +75,41 @@ export default {
     }
   },
   computed: {
+    fourList() {
+      if(!this.groupList) return [];
+      let hasSoft = this.groupList.filter(v => v.softList && v.softList.length > 0);
+      
+      if(hasSoft.length < 4 && hasSoft.length > 0) {
+        hasSoft = hasSoft.concat( new Array( 4 -  hasSoft.length).fill({}) )
+      }
+      return hasSoft && hasSoft.slice(0,4) || []
+    },
     list() {
-      return this.groupList[this.current] && this.groupList[this.current].list
+      return this.fourList[this.current] && this.fourList[this.current].softList
     }
   },
   created() {
-    console.log('groupList', this.groupList, this.list)
+    
   },
   methods: {
+    toTop() {
+      // el-scrollbar 容器
+      const el = this.$refs['scroll'].wrap;
+    
+      const beginTime = Date.now();
+      const beginValue = el.scrollTop;
+      const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
+      const frameFunc = () => {
+        const progress = (Date.now() - beginTime) / 500;
+        if (progress < 1) {
+          el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
+          rAF(frameFunc);
+        } else {
+          el.scrollTop = 0;
+        }
+      };
+      rAF(frameFunc);
+    },
     getFrontApp() {
       this.$emit('getFrontApp');
     },
@@ -162,6 +197,10 @@ export default {
     width: 176px;
     cursor: pointer;
     line-height: 1;
+    &.disable {
+      cursor: auto;
+      pointer-events: none;
+    }
     &:nth-child(2) {
       margin-left: 20px;
     }
@@ -193,6 +232,7 @@ export default {
     align-items: center;
     // justify-content: space-evenly;
     margin-bottom: 4px;
+    height: 50px;
     .second_app_item {
       display: flex;
       align-items: center;
@@ -208,4 +248,15 @@ export default {
       cursor: pointer;
     }
   }
+
+  .visivle-hide {
+    opacity: 0;
+  }
+  /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/components/DragBox/box.vue

 <template>
-  <div class="box">
+  <div class="box" :class="{'noList': nolist}">
     <slot/>
   </div>
 </template>
 
 <script>
 export default {
-
+  props: {
+    nolist: { //是否为空列表
+      type: Boolean,
+      default: false,
+    }
+  }
 }
 </script>
 
@@ -24,6 +29,9 @@ export default {
     box-shadow: 0px 4px 4px 0px rgba(10,78,141,0.1);
     border-radius: 20px 20px 20px 20px;
     margin: 24px 12px 0;
+    &.noList {
+      padding-bottom: 30px;
+    }
     &:nth-child(2n+1) {
       // margin-left: 30px;
       // width: 346px;

src/renderer/components/DragBox/index.vue

@@ -3,7 +3,7 @@
       <div class="dragbox_head">
           <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">
+      <cateBox v-for="(cItem, cIndex) in cateList" :key="cIndex" :nolist="(!cItem.softList || cItem.softList.length == 0)">
             <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}}

src/renderer/styles/electron.less

@@ -2,10 +2,10 @@
 
 .electron_app {
   // 隐藏body滚动条
-  // &::-webkit-scrollbar{width:0;height:0}
-  // &::-webkit-scrollbar-button{width:0;height:0}
-  // &::-webkit-scrollbar-track{background:0 0}
-  // &::-webkit-scrollbar-thumb{background:#dadadb;-webkit-transition:.3s;transition:.3s}
-  // &::-webkit-scrollbar-thumb:hover{background-color:#b0b2b3}
-  // &::-webkit-scrollbar-thumb:active{background-color:#b0b2b3}
+  &::-webkit-scrollbar{width:0;height:0}
+  &::-webkit-scrollbar-button{width:0;height:0}
+  &::-webkit-scrollbar-track{background:0 0}
+  &::-webkit-scrollbar-thumb{background:#dadadb;-webkit-transition:.3s;transition:.3s}
+  &::-webkit-scrollbar-thumb:hover{background-color:#b0b2b3}
+  &::-webkit-scrollbar-thumb:active{background-color:#b0b2b3}
 }
\ No newline at end of file

src/renderer/views/Home.vue

 <template>
   <div class="application-list-container" :class="{'uMode':mode === 'modeUXue'}">
-    <one v-if="mode !== 'modeUXue'" :group1="group1" :group2="group2" :group3="group3" :group4="group4" :mode="mode"
+    <one v-if="mode !== 'modeUXue'" :cateList="categoryList" :mode="mode"
       @tapApp="tapApp" @getFrontApp="newWin"></one>
     <!-- <div @click="newWin">打开新窗口</div> -->
     <second v-else 
-      :groupList="groupSecond" :current="secondAcitveIndex" 
+      :groupList="categoryList" :current="secondAcitveIndex" 
       @tapApp="tapApp" @getFrontApp="newWin" @changeTab="changeSecond"></second>
   </div>
 </template>
@@ -22,6 +22,7 @@ export default {
   data() {
     return {
       appList: [],
+      categoryList:[],
       mode: "modeJianYue",
       showManage:false,
       secondAcitveIndex:1, //U学模式，当前选中
@@ -91,6 +92,10 @@ export default {
     this.createAppWin();
   },
   methods: {
+    getCategoryList() {
+      // 获取分类列表
+      this.ipcRenderer.send("getCategoryList");
+    },
     changeSecond({item,index}) {
       if(this.secondAcitveIndex == index) return;
       this.secondAcitveIndex = index;
@@ -101,7 +106,7 @@ export default {
       const { width, height } = screen.getPrimaryDisplay().workAreaSize; //获取到屏幕的宽度和高度
       const main_win = this.$electron.remote.getCurrentWindow();
       const [mainX, mainY] = main_win.getPosition();
-      console.log(mainX, mainY)
+      // console.log(mainX, mainY)
       this.ipcRenderer.send("window-new", {
         title: "管理页面",
         route: "/manage",
@@ -236,6 +241,11 @@ export default {
         // this.getPinyin();
       });
 
+      this.ipcRenderer.on("category-list", (event, list) => {
+        console.log("获取到分类列表 1", list);
+        this.categoryList = list;
+      });
+
       this.ipcRenderer.on("appsList_update", (event, list) => {
         console.log("刷新app列表", list);
         this.appList = list;
@@ -268,6 +278,9 @@ export default {
       this.ipcRenderer.send("setMainWindow0", { width, height });
       //获取app列表
       this.ipcRenderer.send("getApps");
+
+      // 获取分类列表
+      this.getCategoryList();
     },
     tapApp(item) {
       console.log(item);

src/renderer/views/manage/index.vue

@@ -154,7 +154,7 @@ export default {
     },
     ipcOn() {
       this.ipcRenderer.on("manageVisible", (event,visible) => {
-        console.log('visible 2', visible)
+        // console.log('visible 2', visible)
       })
       // 获取到app列表
       this.ipcRenderer.on("appsList", (event, list) => {
@@ -189,7 +189,6 @@ export default {
       
       this.ipcRenderer.on("update-category-name", (event, data) => {
         let {detail,id,name} = data;
-        console.log("修改分类名字 2", detail,id);
         let curIndex = this.categoryList.findIndex(v => v.id == id);
         this.categoryList[curIndex].name = name;
         this.$message.success("修改成功");