U学模式更改

.env

@@ -29,6 +29,12 @@ VUE_APP_UXueModeH=100
 VUE_APP_WINDOW_LEFT=20
 VUE_APP_WINDOW_BOTTOM=10
 
+#存储数据
+#apps
+VUE_APP_APPSNAME=apps10
+#category
+VUE_APP_CATENAME=categorys8
+
 
 
 

src/assets/css/common.less

@@ -2,3 +2,45 @@
 .disable-drag {
     -webkit-user-drag: none;
 }
+.app-drag {
+    -webkit-app-region: drag;
+}
+.app-nodrag {
+    -webkit-app-region: no-drag;
+}
+
+
+/* 公用 */
+.left_main {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 72px;
+    flex-shrink: 0;
+    padding: 0 40px 0 11px;
+    width: 274px;
+    -webkit-app-region: drag;
+}
+.left_main::after {
+    position: absolute;
+    content: "";
+    right: 0;
+    border-right: 1px solid rgba(3, 20, 40, 0.5);
+    width: 1px;
+    height: calc(100% - 14px);
+}
+.left_main  .left_img {
+    margin-top: 6px;
+    width: 225px;
+    height: 60px;
+    object-fit: contain;
+    -webkit-app-region: no-drag;
+    -webkit-user-drag: none;
+}
+.left_main  .left_name {
+    padding-left: 4px;
+    font-size: 20px;
+    font-weight: 500;
+    color: #fff;
+}
\ No newline at end of file

src/main/events/ipc.js

@@ -115,6 +115,12 @@ class IpcEvents {
           click: () => {
             let {width,height} = whDetail['modeUXue'];
             event.sender.send('context-menu-command', 'modeUXue');
+
+            let list = this.categoryPlugin.getList();
+            let length = list.length;
+            let addWidth = (length-4)*161;
+            width = addWidth + Number(process.env.VUE_APP_UXueModeW);
+
             this.windowManager.mainWindow.win.setBounds({ 
               x: window_left_distance, 
               y: ( Number(displayWH.height) - height - window_bottom_distance), 
@@ -138,7 +144,7 @@ class IpcEvents {
 
     // 获取app列表
     ipcMain.on("getApps", (e, data) => {
-      let apps = this.store.get("apps10");
+      let apps = this.store.get(process.env.VUE_APP_APPSNAME);
       this.store.set("currentMode", "modeJianYue");
       e.sender.send("appsList", apps)
     })
@@ -164,10 +170,10 @@ class IpcEvents {
         }else if(imagePath && imagePath.indexOf('.svg') > 0) {
           src = this.softList.svgToBase64(imagePath);
         }
-        let apps = this.store.get("apps10");
+        let apps = this.store.get(process.env.VUE_APP_APPSNAME);
         apps[index].icon = src || imagePath;
 
-        this.store.set("apps10", apps);
+        this.store.set(process.env.VUE_APP_APPSNAME, apps);
         e.sender.send("base64Info", {url:src,index});
       } catch (error) {
         console.error(error)
@@ -176,7 +182,7 @@ class IpcEvents {
 
     // 移动app列表
     ipcMain.on("moveSoft", (e, {appname, addFiles})=>{
-      let appList = this.store.get("apps10");
+      let appList = this.store.get(process.env.VUE_APP_APPSNAME);
       let addFile = addFiles[0]; //某个拖拽文件
       let targetIndex = appList.findIndex(v => v.name == appname);
       let resIndex = appList.findIndex(v => v.name == addFile.shortName);
@@ -206,7 +212,7 @@ class IpcEvents {
         }
         // 刷新渲染进程app列表
         e.sender.send('appsList_update', appList);
-        this.store.set("apps10", appList);
+        this.store.set(process.env.VUE_APP_APPSNAME, appList);
       }
     })
 
@@ -365,6 +371,15 @@ class IpcEvents {
       // 获取app列表
       this.softListPlugin.getList({sender:e.sender});
     })
+
+    // 改变窗口宽高
+    ipcMain.on("setSize", (e, data) => {
+      let [width,height] = this.windowManager.mainWindow.win.getSize();
+      if(data.width == width) return;
+      this.windowManager.mainWindow.win.setBounds({
+        ...data
+      });
+    })
   }
 }
 

src/main/plugins/category.js

@@ -6,7 +6,7 @@ class category {
 
     // 重置列表
     resetList() {
-        this.store.set("categorys8",[
+        this.store.set(process.env.VUE_APP_CATENAME,[
             {
               name:'备课资源',
               id:'bk001',
@@ -34,7 +34,7 @@ class category {
     getList () {
         // console.log('获取分类列表')
         this.mainWindow.win.webContents.send('getMsg', '获取分类列表-mainprocess')
-        let categoryList = this.store.get("categorys8");
+        let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
         // this.mainWindow.win.webContents.send("categoryList", categoryList);
         return categoryList;
     }
@@ -42,7 +42,7 @@ class category {
     /* 新增分类 */
     addCategory({name, sender}) {
         if(name == undefined) return;
-        let categoryList = this.store.get("categorys8");
+        let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
         name = name.trim();
         let hasIn = categoryList.findIndex(v => v.name == name);
         if(hasIn != -1) return;
@@ -53,28 +53,28 @@ class category {
             softIds:[]
         };
         categoryList.unshift(category);
-        this.store.set("categorys8", categoryList);
+        this.store.set(process.env.VUE_APP_CATENAME, categoryList);
         sender.send("add-category", category);
         this.mainWindow.win.webContents.send("add-category", category);
     }   
     
     /* 删除分类 */
     delCategory({id, sender}) {
-        let categoryList = this.store.get("categorys8");
+        let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
         let hasIn = categoryList.findIndex(v => v.id == id);
         console.log('delCategory - hasIn', hasIn, id)
         if(hasIn == -1) return null;
 
         categoryList.splice(hasIn,1);
 
-        this.store.set("categorys8", categoryList);
+        this.store.set(process.env.VUE_APP_CATENAME, categoryList);
         sender.send('remove-category',{id});
         this.mainWindow.main.webContents.send("category-list", categoryList);
     }
 
     // 获取分类详情
     getCategory(id) {
-        let categoryList = this.store.get("categorys8");
+        let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
         let hasIn = categoryList.findIndex(v => v.id == id);
         if(hasIn == -1) return null;
         return categoryList[hasIn]
@@ -82,42 +82,42 @@ class category {
 
     /* 更新分类列表 */
     updateCategory({id, detail, sender}) {
-        let categoryList = this.store.get("categorys8");
+        let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
         let hasIn = categoryList.findIndex(v => v.id == id);
         // console.log('hasIn', hasIn)
         if(hasIn == -1) return null;
 
         categoryList[hasIn] = detail;
 
-        this.store.set("categorys8", categoryList);
+        this.store.set(process.env.VUE_APP_CATENAME, categoryList);
         sender.send('change-category',{detail,id});
         this.mainWindow.main.webContents.send("category-list", categoryList);
     }
 
     // 更新分类下的软件列表
     updateSoftList({id, detail, sender}) {
-        let categoryList = this.store.get("categorys8");
+        let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
         let hasIn = categoryList.findIndex(v => v.id == id);
         // console.log('hasIn', hasIn)
         if(hasIn == -1) return null;
 
         categoryList[hasIn] = detail;
 
-        this.store.set("categorys8", categoryList);
+        this.store.set(process.env.VUE_APP_CATENAME, categoryList);
         sender.send('remove-soft',{detail,id});
         this.mainWindow.main.webContents.send("category-list", categoryList);
     }
 
     /* 修改分类名称 */
     updateName({name, detail, sender}) {
-        let categoryList = this.store.get("categorys8");
+        let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
         let id = detail.id;
         let hasIn = categoryList.findIndex(v => v.id == id);
         // console.log('hasIn-updateName', hasIn)
         if(hasIn == -1) return null;
 
         categoryList[hasIn].name = name;
-        this.store.set("categorys8", categoryList);
+        this.store.set(process.env.VUE_APP_CATENAME, categoryList);
         sender.send('update-category-name',{detail,id,name});
     }
 
@@ -159,7 +159,7 @@ class category {
     }
 
     getSoftDetail(softId) {
-        let appList = this.store.get("apps10");
+        let appList = this.store.get(process.env.VUE_APP_APPSNAME);
         let targetIndex = appList.findIndex(v => v.id == softId);
         if(targetIndex==-1) return null;
         return appList[targetIndex];

src/main/plugins/softList.js

@@ -11,7 +11,7 @@ class SoftList {
     /* 获取app列表 */
     getList ({sender} = {}) {
         this.mainWindow.win.webContents.send('getMsg', '获取app列表-mainprocess')
-        let appsList = this.store.get("apps10");
+        let appsList = this.store.get(process.env.VUE_APP_APPSNAME);
         if(appsList && appsList.length > 0) {
             // 已有app列表
             // console.log('apps-length', appsList.length)
@@ -223,7 +223,7 @@ class SoftList {
                   searchIcon:true,
                 };
               })
-              this.store.set("apps10", newApps);
+              this.store.set(process.env.VUE_APP_APPSNAME, newApps);
               this.mainWindow.win.webContents.send("appsList", newApps);
               console.log('sender',sender)
               if(sender && sender.send) sender.send("appsList", newApps);
@@ -282,7 +282,7 @@ class SoftList {
                 };
             });
             let newarr = apps.filter(v => !!v.name)
-            this.store.set("apps10", newarr);
+            this.store.set(process.env.VUE_APP_APPSNAME, newarr);
             this.mainWindow.win.webContents.send("appsList", newarr)
         });
     }
@@ -339,12 +339,12 @@ class SoftList {
     }
 
     updatePath({index, path, name}) {
-      let appsList = this.store.get("apps10");
+      let appsList = this.store.get(process.env.VUE_APP_APPSNAME);
       let currentApp = appsList[index];
       if(currentApp && currentApp.name == name) {
         appsList[index].icon = path;
         appsList[index].searchIcon = true;
-        this.store.set("apps10", appsList);
+        this.store.set(process.env.VUE_APP_APPSNAME, appsList);
       }
     }
 

src/main/windows/mainWindow.js

@@ -7,9 +7,9 @@ import SoftList from '../plugins/softList';
 
 const store = new Store({
   defaults: {
-    "apps10": [], //app列表
+    [process.env.VUE_APP_APPSNAME]: [], //app列表
     //分类
-    "categorys8": [
+    [process.env.VUE_APP_CATENAME]: [
       {
         name:'备课资源',
         id:'bk001',
@@ -36,6 +36,8 @@ const store = new Store({
 
 // store.clear(); //清空
 
+global.db = store;
+
 export const windowsCfg = {
   id: '', //唯一id
   title: '', //窗口标题

src/renderer/components/Dockmode/one.vue

@@ -62,38 +62,6 @@ export default {
   height: 100%;
   overflow: hidden;
 }
-.left_main {
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 60px;
-  flex-shrink: 0;
-  padding: 0 20px 0 6px;
-  width: 240px;
-  -webkit-app-region: drag;
-  &::after {
-    position: absolute;
-    content: "";
-    right: 0;
-    border-right: 1px solid rgba(3, 20, 40, 0.5);
-    width: 1px;
-    height: calc(100% - 14px);
-  }
-}
-.left_img {
-  margin-top: 6px;
-  width: 225px;
-  height: 60px;
-  object-fit: contain;
-  -webkit-app-region: no-drag;
-}
-.left_name {
-  padding-left: 4px;
-  font-size: 20px;
-  font-weight: 500;
-  color: #fff;
-}
 .group_list {
   display: flex;
   align-items: center;

src/renderer/components/Dockmode/second.vue

@@ -4,7 +4,7 @@
       <img src="~@/assets/xuchanzhongxue.png" alt="" class="left_img disable-drag" @click="getFrontApp">
     </div>
    <div class="right_app_wrapper">
-      <div class="right_app" :class="['active_'+(current+1)]">
+      <div class="right_app" :class="['active_'+(current+1)]" :style="scrollBarStyle">
       <div class="scroll_bar">
         <el-scrollbar ref="scrollContainer" :vertical="false" style="height: 50px;" class=""
           @wheel.native.prevent="handleScroll">
@@ -14,10 +14,10 @@
             </div>
           </div>
         </el-scrollbar>
-        <div v-if="list && list.length > 12" @click="toLeft" class="scroll-to-left">
+        <div v-if="list && list.length > 8" @click="toLeft" class="scroll-to-left">
           <span class="iconfont icon-right"></span>
         </div>
-        <div v-if="list && list.length > 12" @click="toRight" class="scroll-to-right">
+        <div v-if="list && list.length > 8" @click="toRight" class="scroll-to-right">
           <span class="iconfont icon-right"></span>
         </div>
       </div>
@@ -102,14 +102,32 @@ export default {
     },
     list() {
       return this.fourList[this.current] && this.fourList[this.current].softList
+    },
+    scrollBarStyle() {
+      let groupList = this.fourList;
+      // let maxListLen = 0;
+      // groupList.forEach(v => {
+      //   if(v.softList && v.softList.length > maxListLen) maxListLen = v.softList.length;
+      // });
+      // console.log('maxListLen', maxListLen, groupList)
+      // if(maxListLen<=8) return {
+      //   width: '707px'
+      // }
+      // if(maxListLen<=12) return {
+      //   width: '1000px'
+      // }
+      if(groupList.length <= 4) return {
+        width: '707px'
       }
+      let addWidth = (groupList.length - 4) * 161;
+      return { width: `${addWidth+707}px` }
+    },
   },
   created() {
     
   },
   methods: {
     handleScroll(e) {
-      console.log('handleScroll',e)
       const eventDelta = e.wheelDelta || -e.deltaY * 40;
       const $scrollWrapper = this.scrollWrapper;
       $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
@@ -169,38 +187,6 @@ export default {
     align-items: center;
     height: 100%;
   }
-  .left_main {
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 72px;
-    flex-shrink: 0;
-    padding: 0 20px 0 6px;
-    width: 240px;
-    // background-color: hsl(0, 0%, 25%);
-    &::after {
-      position: absolute;
-      content: "";
-      right: 0;
-      border-right: 1px solid #031428;
-      width: 1px;
-      height: calc(100% - 14px);
-    }
-    .left_img {
-      margin-top: 6px;
-      width: 225px;
-      height: 60px;
-      object-fit: contain;
-    }
-    .left_name {
-      padding-left: 4px;
-      font-size: 20px;
-      font-weight: 500;
-      color: #fff;
-    }
-  }
-  
   .right_app_wrapper {
     display: flex;
     align-items: center;
@@ -208,7 +194,6 @@ export default {
     // flex: 1;
   }
   .right_app {
-    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -224,6 +209,7 @@ export default {
     // background-image: url(~@/assets/bgc/3.png);
     // background-color: rgba(255, 255, 255, 0.2);
     .scroll_bar {
+      position: relative;
       height: 44px;
     }
     .scroll_bar:hover {

src/renderer/main.js

@@ -14,6 +14,24 @@ import "vue-router-tab/dist/lib/vue-router-tab.css";
 if ( isElectron() ) require("./styles/electron.less");
 if (!!process.env.IS_ELECTRON) Vue.use(require("./vue_electron.js"));
 
+// 引入主进程的db存储
+const db = require('electron').remote.getGlobal('db')
+Vue.prototype.$db = {
+  get(key) {
+    return db.get(key);
+  },
+  set(key, val) {
+    return db.set(key, val);
+  },
+  onDidChange(key, fun) {
+    return db.onDidChange(key, fun);
+  },
+};
+
+// 使用方法
+// this.$db.set('userInfo', '');
+// this.$db.get('userInfo');
+// this.$db.onDidChange('userInfo',fn)
 
 import {
   Button,

src/renderer/views/Home.vue

@@ -50,6 +50,7 @@ export default {
     }
   },
   created() {
+    this.$db.onDidChange(process.env.VUE_APP_CATENAME,this.watchCategoryChange)
     // this.ipcRenderer.invoke('getOsPlatform').then((platform) => {
     //   console.log(platform);
     // });
@@ -77,6 +78,18 @@ export default {
     });
   },
   methods: {
+    watchCategoryChange(list) {
+      // 监听分类变化
+      // 更改 U学模式宽度
+      let length = list.length;
+      let addWidth = (length-4)*161;
+      if(this.mode === "modeUXue") {
+        this.ipcRenderer.send("setSize",{
+          width: addWidth + Number(process.env.VUE_APP_UXueModeW)
+        })
+        return;
+      }
+    },
     getCategoryList() {
       // 获取分类列表
       this.ipcRenderer.send("getCategoryList");

vue.config.js

@@ -42,6 +42,7 @@ module.exports = {
   },
   pluginOptions: {
     electronBuilder: {
+      nodeIntegration:true,
       mainProcessFile: 'src/main/index.js',
       // mainProcessWatch: ['src/main'],
       // rendererProcessFile: 'src/main.js',