demo 登录

electron/config/config.default.js

@@ -47,8 +47,8 @@ module.exports = (appInfo) => {
     title: 'EE框架',
     width: 980,
     height: 650,
-    minWidth: 800,
-    minHeight: 650,
+    minWidth: 400,
+    minHeight: 300,
     webPreferences: {
       webSecurity: false,
       contextIsolation: false, // false -> 可在渲染进程中使用electron的api，true->需要bridge.js(contextBridge)

electron/controller/effect.js

@@ -3,6 +3,7 @@
 const { Controller } = require('ee-core');
 const { dialog } = require('electron');
 const _ = require('lodash');
+const CoreWindow = require('ee-core/electron/window');
 
 /**
  * 特效 - 功能demo
@@ -17,7 +18,7 @@ class EffectController extends Controller {
   /**
    * 选择文件
    */
-  selectFile () {
+  selectFile() {
     const filePaths = dialog.showOpenDialogSync({
       properties: ['openFile']
     });
@@ -27,6 +28,42 @@ class EffectController extends Controller {
     }
 
     return filePaths[0];
+  }
+
+  /**
+   * login window
+   */
+  loginWindow(args) {
+    const { width, height } = args;
+    const win = CoreWindow.getMainWindow();
+    
+    const size = {
+      width: width || 400,
+      height: height || 300
+    }
+    win.setSize(size.width, size.height);
+    win.setResizable(true);
+    win.center();
+    win.show();
+    win.focus();
+  }
+  
+  /**
+   * restore window
+   */
+  restoreWindow(args) {
+    const { width, height } = args;
+    const win = CoreWindow.getMainWindow();
+
+    const size = {
+      width: width || 980,
+      height: height || 650
+    }
+    win.setSize(size.width, size.height);
+    win.setResizable(true);
+    win.center();
+    win.show();
+    win.focus();
   }  
 }
 

frontend/src/api/main.js

@@ -51,6 +51,8 @@ const ipcApiRoute = {
 
   // effect
   selectFile: 'controller.effect.selectFile',
+  loginWindow: 'controller.effect.loginWindow',
+  restoreWindow: 'controller.effect.restoreWindow',
 }
 
 /**

frontend/src/router/routerMap.js

@@ -148,6 +148,11 @@ const constantRouterMap = [
             name: 'EffectVideoIndex',
             component: () => import('@/views/effect/video/Index.vue')
           },
+          {
+            path: '/effect/login/index',
+            name: 'EffectLoginIndex',
+            component: () => import('@/views/effect/login/Index.vue')
+          }
         ]  
       },
     ]
@@ -159,7 +164,12 @@ const constantRouterMap = [
         path: 'subwindow',
         name: 'SpecialSubwindowIpc',
         component: () => import('@/views/os/subwindow/Ipc.vue')
-      }
+      },
+      {
+        path: '/login',
+        name: 'SpecialLoginWindow',
+        component: () => import('@/views/effect/login/Window.vue')
+      },
     ]
   },
 ]

frontend/src/router/subMenu.js

@@ -128,6 +128,12 @@ export default {
       title: '视频播放器',
       pageName: 'EffectVideoIndex',
       params: {}
-    }                                                 
+    },
+    'menu_110' : {
+      icon: 'profile',
+      title: '登录',
+      pageName: 'EffectLoginIndex',
+      params: {}
+    }                                                
   } 	
 }

frontend/src/views/effect/login/Index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div id="effect-login-index">
+    <div class="one-block-1">
+      <span>
+          1. 登录
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="loginWindow()">切换为登录窗口</a-button>
+      </a-space>
+    </div>
+  </div>
+</template>
+<script>
+import { ipcApiRoute } from '@/api/main';
+import { ipc } from '@/utils/ipcRenderer';
+
+export default {
+  data() {
+    return {
+    };
+  },
+  methods: {
+    loginWindow () {
+      this.$router.push({ name: 'SpecialLoginWindow', params: {}});
+      ipc.invoke(ipcApiRoute.loginWindow, {width: 400, height: 300}).then(r => {      
+        // 
+      })
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+#effect-login-index {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+      font-size: 16px;
+      padding-top: 10px;
+  }
+  .one-block-2 {
+      padding-top: 10px;
+  }
+}
+</style>
+  

frontend/src/views/effect/login/Window.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="effect-login-window">
+    <div class="block-1">
+      <a v-if="!loading" @click="login">
+        <a-button type="primary">
+          登录
+        </a-button>
+      </a>
+      <span v-else>{{ loginText }}</span>
+    </div>  
+  </div>
+</template>
+<script>
+import { ipcApiRoute } from '@/api/main';
+import { ipc } from '@/utils/ipcRenderer';
+  
+export default {
+  data() {
+    return {
+      loading: false, 
+      loginText: '正在登陆......'
+    };
+  },
+  methods: {
+    login() {
+      this.loading = true;
+      setTimeout(() => {
+        this.$router.push({ name: 'Framework', params: {}});
+        ipc.invoke(ipcApiRoute.restoreWindow, {width: 980, height: 650}).then(r => {      
+          // 
+        })
+      }, 2000);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#effect-login-window {
+  width: 100%;
+  min-height: 100%;
+  background: #f0f2f5 url(/src/assets/login.png) no-repeat 50%;
+  display: flex;
+  .block-1 {
+    font-size: 16px;
+    align-items: center;
+    margin: auto;
+    display: inline-block;
+  }
+}
+</style>
+  

frontend/src/views/os/file/Pic.vue

@@ -38,16 +38,16 @@ export default {
 </script>
 <style lang="less" scoped>
 #os-file-pic {
-padding: 0px 10px;
-text-align: left;
-width: 100%;
-.one-block-1 {
-    font-size: 16px;
-    padding-top: 10px;
-}
-.one-block-2 {
-    padding-top: 10px;
-}
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+      font-size: 16px;
+      padding-top: 10px;
+  }
+  .one-block-2 {
+      padding-top: 10px;
+  }
 }
 </style>