feat:添加登录退出逻辑

.electron-vue/dev-runner.js

@@ -19,7 +19,7 @@ let hotMiddleware
 function logStats (proc, data) {
   let log = ''
 
-  log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`)
+  log += chalk.green.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`)
   log += '\n\n'
 
   if (typeof data === 'object') {
@@ -33,7 +33,7 @@ function logStats (proc, data) {
     log += `  ${data}\n`
   }
 
-  log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n'
+  log += '\n' + chalk.green.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n'
 
   console.log(log)
 }
@@ -133,7 +133,7 @@ function startElectron () {
     electronLog(data, 'blue')
   })
   electronProcess.stderr.on('data', data => {
-    electronLog(data, 'red')
+    electronLog(data, 'yellow')
   })
 
   electronProcess.on('close', () => {

src/main/browsers/index.js

@@ -2,5 +2,6 @@ module.exports = () => ({
   picker: require("./picker")(),
   separator: require("./separate")(),
   superPanel: require("./superPanel")(),
+  login: require("./login")(),
   main: require("./main")(),
 })

src/main/browsers/login.js

+const { BrowserWindow, ipcMain, session, remote } = require("electron");
+const path = require("path");
+
+module.exports = () => {
+  let win;
+  const url = "https://csdn.net";
+
+  let init = mainWindow => {
+    // if (win === null || win === undefined) {
+    //   createWindow();
+    // }
+    ipcMain.on("token", (e, info) => {
+      console.log("on token");
+
+      session.defaultSession.cookies
+        .get({
+          url: url
+        })
+        .then((cookies, err) => {
+          const userInfo = {};
+          cookies.forEach(cookie => {
+            userInfo[cookie.name] = decodeURI(cookie.value);
+          });
+          userInfo.avatar = info.avatar;
+          console.log(userInfo);
+          global.opConfig.set("userInfo", userInfo);
+          mainWindow.webContents.send("setUserInfo", userInfo);
+          // ipcRenderer.send("re-register");
+          win.close();
+        });
+    });
+    ipcMain.on("logout", (e, info) => {
+      console.log("remove cookie");
+
+      session.defaultSession.cookies
+        .get({
+          url: url
+        })
+        .then((cookies, err) => {
+          cookies.forEach(cookie => {
+            session.defaultSession.cookies.remove(url, cookie.name, e => {});
+          });
+        });
+    });
+  };
+
+  let createWindow = () => {
+    console.log("create window");
+    session.defaultSession.cookies
+      .get({
+        url: url
+      })
+      .then((cookies, err) => {
+        console.log("222", cookies);
+      });
+
+    win = new BrowserWindow({
+      frame: true,
+      autoHideMenuBar: true,
+      title: false,
+      width: 460,
+      height: 400,
+      show: false,
+      resizable: false,
+      closable: true,
+      titleBarStyle: "hiddenInset",
+      minimizable: true,
+      alwaysOnTop: true,
+      webPreferences: {
+        webSecurity: false,
+        enableRemoteModule: true,
+        nodeIntegration: true,
+        backgroundThrottling: false,
+        devTools: false,
+        preload: path.resolve(__dirname, "../common/preload.js")
+      }
+    });
+    // win.loadFile(path.resolve(__dirname, "../../../../send.html"));
+    // win.loadURL("https://meiyin.xyz");
+    win.loadURL(
+      `https://passport.csdn.net/account/login?from=http://test-code.csdn.net/lives`
+    );
+    win.on("closed", () => {
+      win = undefined;
+    });
+    // 打包后，失焦隐藏
+    win.on("blur", () => {
+      // win.hide();
+    });
+    win.webContents.on("did-stop-loading", () => {
+      win.webContents.insertCSS(
+        `
+        #csdn-toolbar, #copyright-box, #app .notes, #app .icon-list, #app .user-service-link { display: none }
+        #app, #app .container-main { min-width: unset!important; min-height: unset!important; }
+        #app .main { width: unset }
+        #app .main-login { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999 }
+        #app .form-control-phone { width: 62%; float: right }
+        #app .main-process-login { width: 66%; margin-top: 20px }
+        .login-success-tip { display: none }
+        `
+      );
+      setTimeout(() => {
+        win.show();
+      }, 10);
+    });
+  };
+
+  let getWindow = () => win;
+
+  return {
+    init,
+    getWindow,
+    createWindow
+  };
+};

src/main/browsers/main.js

 const { BrowserWindow, protocol } = require("electron");
+const path = require('path')
+
 module.exports = () => {
   let win;
 
@@ -28,6 +30,7 @@ module.exports = () => {
         contextIsolation: false,
         webviewTag: true,
         nodeIntegration: true, // 在网页中集成Node
+        // preload: path.resolve(__dirname, '../common/preload.js')
       },
     });
 

src/main/browsers/superPanel.js

@@ -3,7 +3,7 @@ const { BrowserWindow, ipcMain, app } = require("electron");
 module.exports = () => {
   let win;
 
-  let init = (mainWindow) => {
+  let init = mainWindow => {
     if (win === null || win === undefined) {
       createWindow();
       ipcMain.on("superPanel-hidden", () => {
@@ -31,8 +31,8 @@ module.exports = () => {
         enableRemoteModule: true,
         backgroundThrottling: false,
         nodeIntegration: true,
-        devTools: false,
-      },
+        devTools: false
+      }
     });
     win.loadURL(`file://${__static}/plugins/superPanel/index.html`);
     win.on("closed", () => {
@@ -48,6 +48,6 @@ module.exports = () => {
 
   return {
     init,
-    getWindow,
+    getWindow
   };
 };

src/main/common/common.js

@@ -21,7 +21,7 @@ export default function init(mainWindow) {
   mainWindow.on("blur", () => {
     const config = { ...opConfig.get() };
     if (config.perf.common.hideOnBlur) {
-      mainWindow.hide();
+      // mainWindow.hide();
     }
   });
 }

src/main/common/config.js

@@ -12,38 +12,39 @@ const defaultConfigForAnyPlatform = {
     shortCut: {
       showAndHidden: "Option+R",
       separate: "Ctrl+D",
-      quit: "Shift+Escape",
+      quit: "Shift+Escape"
     },
     common: {
       start: true,
       space: true,
       // 是否失焦隐藏。默认在dev环境不隐藏，在打包后隐藏。
-      hideOnBlur: app.isPackaged,
+      hideOnBlur: app.isPackaged
     },
     local: {
-      search: true,
-    },
+      search: true
+    }
   },
   superPanel: {
     baiduAPI: {
       key: "",
-      appid: "",
+      appid: ""
     },
-    mouseDownTime: 500,
+    mouseDownTime: 500
   },
-  global: [],
+  userInfo: '',
+  global: []
 };
 
 let defaultConfig = {
   Darwin: {
-    ...defaultConfigForAnyPlatform,
+    ...defaultConfigForAnyPlatform
   },
   Windows_NT: {
-    ...defaultConfigForAnyPlatform,
+    ...defaultConfigForAnyPlatform
   },
   Linux: {
-    ...defaultConfigForAnyPlatform,
-  },
+    ...defaultConfigForAnyPlatform
+  }
 };
 global.opConfig = {
   config: null,
@@ -72,5 +73,5 @@ global.opConfig = {
   set(key, value) {
     opConfig.config[key] = value;
     fs.writeFileSync(configPath, JSON.stringify(opConfig.config));
-  },
+  }
 };

src/main/common/listener.js

@@ -7,43 +7,44 @@ import {
   ipcMain,
   Notification,
   screen,
-  TouchBar
-} from 'electron';
-import {exec, spawn} from "child_process";
+  TouchBar,
+  session
+} from "electron";
+import { exec, spawn } from "child_process";
 import robot from "robotjs";
 import Api from "./api";
-import ioHook from 'iohook';
-import {throttle, commonConst} from './utils';
-import path from 'path';
+import ioHook from "iohook";
+import { throttle, commonConst } from "./utils";
+import path from "path";
 import fs from "fs";
-import mito from './monitor';
+import mito from "./monitor";
 
 const browsers = require("../browsers")();
-const {picker, separator, superPanel} = browsers;
+const { picker, separator, superPanel, login } = browsers;
 
 class Listener {
   constructor() {
     this.optionPlugin = {};
-    this.isWin = process.platform === 'win32';
+    this.isWin = process.platform === "win32";
   }
 
   getSelectedContent() {
-    return new Promise((resolve) => {
-      const lastText = clipboard.readText('clipboard');
+    return new Promise(resolve => {
+      const lastText = clipboard.readText("clipboard");
       // todo 缓存文件
       clipboard.clear();
 
       // 复制选中文案
       if (commonConst.macOS()) {
-        robot.keyTap('c', 'command');
+        robot.keyTap("c", "command");
       } else {
-        robot.keyTap('c', 'control');
+        robot.keyTap("c", "control");
       }
 
       setTimeout(() => {
         // 延时一定时间才能从剪切板内读取到内容
-        const text = clipboard.readText('clipboard') || ''
-        const fileUrl = clipboard.read('public.file-url');
+        const text = clipboard.readText("clipboard") || "";
+        const fileUrl = clipboard.read("public.file-url");
         if (this.isWin) {
           // todo https://github.com/njzydark/Aragorn/blob/afe4a60972b4255dd417480ca6aca2af1fd8e637/packages/aragorn-app-main/src/uploaderManager.ts#L88
         }
@@ -53,9 +54,9 @@ class Listener {
         resolve({
           text,
           fileUrl
-        })
+        });
       }, 300);
-    })
+    });
   }
 
   registerShortCut(mainWindow) {
@@ -63,25 +64,31 @@ class Listener {
     globalShortcut.unregisterAll();
     // 注册偏好快捷键
     globalShortcut.register(config.perf.shortCut.showAndHidden, () => {
-      const {x, y} = screen.getCursorScreenPoint();
-      const currentDisplay = screen.getDisplayNearestPoint({x, y});
-      const wx = parseInt(currentDisplay.workArea.x + currentDisplay.workArea.width / 2 - 400);
-      const wy = parseInt(currentDisplay.workArea.y + currentDisplay.workArea.height / 2 - 200);
+      const { x, y } = screen.getCursorScreenPoint();
+      const currentDisplay = screen.getDisplayNearestPoint({ x, y });
+      const wx = parseInt(
+        currentDisplay.workArea.x + currentDisplay.workArea.width / 2 - 400
+      );
+      const wy = parseInt(
+        currentDisplay.workArea.y + currentDisplay.workArea.height / 2 - 200
+      );
 
-      mainWindow.setAlwaysOnTop(true)
-      mainWindow.setVisibleOnAllWorkspaces(true, {visibleOnFullScreen: true});
+      mainWindow.setAlwaysOnTop(true);
+      mainWindow.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
       mainWindow.focus();
-      mainWindow.setVisibleOnAllWorkspaces(false, {visibleOnFullScreen: true});
+      mainWindow.setVisibleOnAllWorkspaces(false, {
+        visibleOnFullScreen: true
+      });
       mainWindow.setPosition(wx, wy);
       mainWindow.show();
     });
 
     globalShortcut.register(config.perf.shortCut.separate, () => {
-      mainWindow.webContents.send('new-window');
+      mainWindow.webContents.send("new-window");
     });
 
     globalShortcut.register(config.perf.shortCut.quit, () => {
-      mainWindow.webContents.send('init-rubick');
+      mainWindow.webContents.send("init-rubick");
       mainWindow.show();
     });
 
@@ -89,14 +96,14 @@ class Listener {
     config.global.forEach(sc => {
       if (!sc.key || !sc.value) return;
       globalShortcut.register(sc.key, () => {
-        mainWindow.webContents.send('global-short-key', sc.value);
+        mainWindow.webContents.send("global-short-key", sc.value);
       });
     });
   }
 
   init(mainWindow) {
-    this.fn = throttle(({x, y}, picker) => {
-      const {scaleFactor} = screen.getDisplayNearestPoint({x, y});
+    this.fn = throttle(({ x, y }, picker) => {
+      const { scaleFactor } = screen.getDisplayNearestPoint({ x, y });
       const img = robot.screen.capture(
         x - parseInt(5 / scaleFactor),
         y - parseInt(5 / scaleFactor),
@@ -104,7 +111,7 @@ class Listener {
         10
       );
 
-      const colors = {}
+      const colors = {};
 
       for (let i = 0; i < 9; i++) {
         colors[i] = {};
@@ -121,6 +128,7 @@ class Listener {
     this.lockScreen();
     this.separate();
     this.initCapture();
+    this.login(mainWindow);
     this.initTouchBar(mainWindow);
     this.superPanel(mainWindow);
     this.reRegisterShortCut(mainWindow);
@@ -131,13 +139,13 @@ class Listener {
 
   colorPicker() {
     // 拾色器
-    ipcMain.on('start-picker', () => {
+    ipcMain.on("start-picker", () => {
       // 开启输入侦测
       ioHook.start(false);
       !this.isWin && ioHook.load();
       picker.init();
 
-      picker.getWindow().on('close', () => {
+      picker.getWindow().on("close", () => {
         ioHook.stop();
         ioHook.removeAllListeners();
         !this.isWin && ioHook.unload();
@@ -148,9 +156,14 @@ class Listener {
         .getWindow()
         .setPosition(parseInt(pos.x) + 10, parseInt(pos.y) + 10);
 
-      const img = robot.screen.capture(parseInt(pos.x) - 5, parseInt(pos.y) - 5, 9, 9);
+      const img = robot.screen.capture(
+        parseInt(pos.x) - 5,
+        parseInt(pos.y) - 5,
+        9,
+        9
+      );
 
-      const colors = {}
+      const colors = {};
 
       for (let i = 0; i < 9; i++) {
         colors[i] = {};
@@ -159,43 +172,55 @@ class Listener {
         }
       }
 
-      picker
-        .getWindow()
-        .webContents.send(
-        "updatePicker",
-        colors
-      );
+      picker.getWindow().webContents.send("updatePicker", colors);
 
       ipcMain.on("closePicker", () => {
         this.closePicker();
       });
 
-      ioHook.on('mousemove', e => {
-        let {x, y} = this.getPos(e);
+      ioHook.on("mousemove", e => {
+        let { x, y } = this.getPos(e);
         if (!picker.getWindow()) return;
         picker.getWindow().setPosition(parseInt(x) + 10, parseInt(y) + 10);
         this.fn(e, picker);
-      })
+      });
 
-      ioHook.on('mouseup', e => {
+      ioHook.on("mouseup", e => {
         if (e.button === 1) {
-          let x = e.x
-          let y = e.y
+          let x = e.x;
+          let y = e.y;
           const color = "#" + robot.getPixelColor(parseInt(x), parseInt(y));
-          clipboard.writeText("#" + robot.getPixelColor(parseInt(x), parseInt(y)));
-          new Notification({title: 'Rubick 通知', body: `${color} 已保存到剪切板`}).show();
+          clipboard.writeText(
+            "#" + robot.getPixelColor(parseInt(x), parseInt(y))
+          );
+          new Notification({
+            title: "Quicker 通知",
+            body: `${color} 已保存到剪切板`
+          }).show();
           this.closePicker();
         }
       });
 
-      ioHook.on('mouseup', e => {
+      ioHook.on("mouseup", e => {
         if (e.button === 3) {
-          this.closePicker()
+          this.closePicker();
         }
       });
     });
   }
 
+  login(mainWindow) {
+    login.init(mainWindow);
+    ipcMain.on("login", (e, args) => {
+      const win = login.getWindow();
+      console.log("win", win);
+
+      if (win === null || win === undefined) {
+        login.createWindow();
+      }
+    });
+  }
+
   closePicker() {
     if (picker.getWindow()) {
       ipcMain.removeListener("closePicker", this.closePicker);
@@ -205,64 +230,72 @@ class Listener {
 
   initTouchBar(mainWindow) {
     if (!commonConst.macOS()) return;
-    const {TouchBarButton, TouchBarGroup, TouchBarPopover} = TouchBar;
+    const { TouchBarButton, TouchBarGroup, TouchBarPopover } = TouchBar;
     let items = [];
     let system = [];
-    ipcMain.on('pluginInit', (e, args) => {
+    ipcMain.on("pluginInit", (e, args) => {
       this.optionPlugin = args;
-      items = args.plugins.map((item) => {
-        const iconPath = path.join(item.sourceFile, '../', item.logo);
-        if (!fs.existsSync(iconPath)) return false;
-        const icon = nativeImage.createFromPath(iconPath).resize({width: 20, height: 20});
-
-        return new TouchBarButton({
-          icon,
-          click() {
-            mainWindow.webContents.send('superPanel-openPlugin', {
-              cmd: item.features[0].cmds.filter(cmd => typeof cmd === 'string')[0],
-              plugin: item,
-              feature: item.features[0],
-            });
-          }
-        })
-      }).filter(Boolean);
+      items = args.plugins
+        .map(item => {
+          const iconPath = path.join(item.sourceFile, "../", item.logo);
+          if (!fs.existsSync(iconPath)) return false;
+          const icon = nativeImage
+            .createFromPath(iconPath)
+            .resize({ width: 20, height: 20 });
 
-      system = args.plugins.map((item) => {
-        if (item.type === 'system') {
           return new TouchBarButton({
-            icon: nativeImage.createFromDataURL(item.logo).resize({width: 20, height: 20}),
+            icon,
             click() {
-              mainWindow.webContents.send('superPanel-openPlugin', {
-                cmd: item.features[0].cmds.filter(cmd => typeof cmd === 'string')[0],
+              mainWindow.webContents.send("superPanel-openPlugin", {
+                cmd: item.features[0].cmds.filter(
+                  cmd => typeof cmd === "string"
+                )[0],
                 plugin: item,
-                feature: item.features[0],
+                feature: item.features[0]
               });
             }
           });
-        }
-        return false;
-      }).filter(Boolean);
+        })
+        .filter(Boolean);
+
+      system = args.plugins
+        .map(item => {
+          if (item.type === "system") {
+            return new TouchBarButton({
+              icon: nativeImage
+                .createFromDataURL(item.logo)
+                .resize({ width: 20, height: 20 }),
+              click() {
+                mainWindow.webContents.send("superPanel-openPlugin", {
+                  cmd: item.features[0].cmds.filter(
+                    cmd => typeof cmd === "string"
+                  )[0],
+                  plugin: item,
+                  feature: item.features[0]
+                });
+              }
+            });
+          }
+          return false;
+        })
+        .filter(Boolean);
 
       const plugin = new TouchBarPopover({
         items: new TouchBar({
-          items,
+          items
         }),
-        label: '已安装插件',
+        label: "已安装插件",
         showCloseButton: true
       });
 
       const monitor = new TouchBarPopover({
         items: mito.touchBar,
-        label: '系统监控',
+        label: "系统监控",
         showCloseButton: true
       });
 
       const touchBar = new TouchBar({
-        items: [
-          plugin,
-          monitor,
-          ...system
-        ]
+        items: [plugin, monitor, ...system]
       });
       mainWindow.setTouchBar(touchBar);
       mito.start(mainWindow);
@@ -270,18 +303,20 @@ class Listener {
   }
 
   initPlugin() {
-    ipcMain.on('optionPlugin', (e, args) => {
+    ipcMain.on("optionPlugin", (e, args) => {
       this.optionPlugin = args;
     });
   }
 
   lockScreen() {
     // 锁屏
-    ipcMain.on('lock-screen', () => {
+    ipcMain.on("lock-screen", () => {
       const lockCommands = {
-        darwin: '/System/Library/CoreServices/ScreenSaverEngine.app/Contents/MacOS/ScreenSaverEngine',
-        win32: 'rundll32.exe user32.dll, LockWorkStation',
-        linux: '(hash gnome-screensaver-command 2>/dev/null && gnome-screensaver-command -l) || (hash dm-tool 2>/dev/null && dm-tool lock)'
+        darwin:
+          "/System/Library/CoreServices/ScreenSaverEngine.app/Contents/MacOS/ScreenSaverEngine",
+        win32: "rundll32.exe user32.dll, LockWorkStation",
+        linux:
+          "(hash gnome-screensaver-command 2>/dev/null && gnome-screensaver-command -l) || (hash dm-tool 2>/dev/null && dm-tool lock)"
       };
       exec(lockCommands[process.platform]);
     });
@@ -290,31 +325,32 @@ class Listener {
   superPanel(mainWindow) {
     // 长按右击呼起超级面板
     superPanel.init(mainWindow);
-    ipcMain.on('right-down', async () => {
-
+    ipcMain.on("right-down", async () => {
       const copyResult = await this.getSelectedContent();
       let win = superPanel.getWindow();
 
-      win.webContents.send('trigger-super-panel', {
+      win.webContents.send("trigger-super-panel", {
         ...copyResult,
-        optionPlugin: this.optionPlugin.plugins,
+        optionPlugin: this.optionPlugin.plugins
       });
       const pos = this.getPos(robot.getMousePos());
       win.setPosition(parseInt(pos.x), parseInt(pos.y));
       win.setAlwaysOnTop(true);
-      win.setVisibleOnAllWorkspaces(true, {visibleOnFullScreen: true});
+      win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
       win.focus();
-      win.setVisibleOnAllWorkspaces(false, {visibleOnFullScreen: true});
+      win.setVisibleOnAllWorkspaces(false, { visibleOnFullScreen: true });
       win.show();
     });
   }
 
   getPos(point) {
-    return this.isWin ? screen.screenToDipPoint({x: point.x, y: point.y}) : point;
+    return this.isWin
+      ? screen.screenToDipPoint({ x: point.x, y: point.y })
+      : point;
   }
 
   reRegisterShortCut(mainWindow) {
-    ipcMain.on('re-register', (event, arg) => {
+    ipcMain.on("re-register", (event, arg) => {
       this.setAutoLogin();
       this.registerShortCut(mainWindow);
     });
@@ -325,25 +361,24 @@ class Listener {
     const config = global.opConfig.get();
     app.setLoginItemSettings({
       openAtLogin: config.perf.common.start,
-      openAsHidden: true,
+      openAsHidden: true
     });
   }
 
-
   changeSize(mainWindow) {
     // 修改窗口尺寸
-    ipcMain.on('changeWindowSize-rubick', (event, arg) => {
+    ipcMain.on("changeWindowSize-rubick", (event, arg) => {
       mainWindow.setSize(arg.width || 800, arg.height);
     });
   }
 
   msgTrigger(mainWindow) {
     // 响应 preload.js 事件
-    ipcMain.on('msg-trigger', async (event, arg) => {
-      const window = arg.winId ? BrowserWindow.fromId(arg.winId) : mainWindow
-      const operators = arg.type.split('.');
+    ipcMain.on("msg-trigger", async (event, arg) => {
+      const window = arg.winId ? BrowserWindow.fromId(arg.winId) : mainWindow;
+      const operators = arg.type.split(".");
       let fn = Api;
-      operators.forEach((op) => {
+      operators.forEach(op => {
         fn = fn[op];
       });
       const data = await fn(arg, window);
@@ -353,19 +388,19 @@ class Listener {
 
   separate() {
     // 窗口分离
-    ipcMain.on('new-window', (event, arg) => {
+    ipcMain.on("new-window", (event, arg) => {
       const opts = {
         ...arg,
-        searchType: 'subWindow',
-      }
+        searchType: "subWindow"
+      };
       separator.init(JSON.stringify(opts));
     });
   }
 
   initCapture() {
-    ipcMain.on('capture-screen', () => {
-      if (process.platform === 'darwin') {
-        spawn('/usr/sbin/screencapture', ["-c", "-i", "-r"], {detached: !0});
+    ipcMain.on("capture-screen", () => {
+      if (process.platform === "darwin") {
+        spawn("/usr/sbin/screencapture", ["-c", "-i", "-r"], { detached: !0 });
       }
       // todo win
     });
@@ -373,7 +408,7 @@ class Listener {
 
   windowMoveInit(win) {
     let hasInit = false;
-    ipcMain.on('window-move', () => {
+    ipcMain.on("window-move", () => {
       let bounds = win.getBounds();
       if (!hasInit) {
         hasInit = true;
@@ -384,16 +419,18 @@ class Listener {
         const winStartPosition = { x: winPosition[0], y: winPosition[1] };
         const mouseStartPosition = screen.getCursorScreenPoint();
 
-        ioHook.on('mousedrag', e => {
+        ioHook.on("mousedrag", e => {
           const cursorPosition = screen.getCursorScreenPoint();
-          const dx = winStartPosition.x + cursorPosition.x - mouseStartPosition.x;
-          const dy = winStartPosition.y + cursorPosition.y - mouseStartPosition.y;
+          const dx =
+            winStartPosition.x + cursorPosition.x - mouseStartPosition.x;
+          const dy =
+            winStartPosition.y + cursorPosition.y - mouseStartPosition.y;
           bounds.x = parseInt(dx);
           bounds.y = parseInt(dy);
           win.setBounds(bounds);
         });
 
-        ioHook.on('mouseup', e => {
+        ioHook.on("mouseup", e => {
           hasInit = false;
           ioHook.stop();
           ioHook.removeAllListeners();

src/main/common/preload.js

+const { ipcRenderer } = require("electron");
+
+window.ipcRenderer = ipcRenderer;
\ No newline at end of file

src/renderer/App.vue

@@ -7,8 +7,7 @@
             :key="selected.key"
             @close="closeTag"
             class="select-tag"
-            color="green"
-            closable
+            color="orange"
           >
             {{ selected.name }}
           </a-tag>
@@ -18,7 +17,7 @@
           :placeholder="
             subPlaceHolder && selected && selected.key === 'plugin-container'
               ? subPlaceHolder
-              : 'Hi, Rubick'
+              : 'Hello, Quicker'
           "
           @mousedown.stop="dragWhenInput"
           class="main-input"
@@ -54,8 +53,8 @@
               </a-spin>
               <img class="icon-tool" :src="selected.icon" />
             </div>
-            <div v-else class="rubick-logo">
-              <img src="./assets/imgs/logo.png" />
+            <div v-else class="logo">
+              <img src="./assets/imgs/quicker.png" />
             </div>
           </div>
         </a-input>
@@ -357,7 +356,7 @@ export default {
       ) {
         const pluginMenu = [
           {
-            label: this.config.perf.common.hideOnBlur ? "自动隐藏" : "钉住",
+            label: this.config.perf.common.hideOnBlur ?   "钉住" : "自动隐藏",
             click: this.changeHideOnBlur,
           },
           {
@@ -471,16 +470,17 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
-  .rubick-logo {
+  .logo {
     width: 40px;
     height: 40px;
-    background: #574778;
+    // background: #574778;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 100%;
+    border-radius: 50%;
+    overflow: hidden;
     img {
-      width: 32px;
+      width: 40px;
     }
   }
   .tag-container {
@@ -490,7 +490,9 @@ export default {
 
     .select-tag {
       height: 36px;
-      font-size: 20px;
+      font-size: 18px;
+      border-radius: 40px;
+      padding: 0 20px;
       display: flex;
       align-items: center;
     }
@@ -555,6 +557,7 @@ export default {
 .suffix-tool {
   display: flex;
   align-items: center;
+  cursor: pointer;
   .icon-more {
     font-size: 26px;
     font-weight: bold;

src/renderer/assets/api/config.js

 export default {
+  development: 'http://118.195.176.247:8080',
   development: 'http://118.195.176.247:8080',
   production: 'http://118.195.176.247:8080'
 };

src/renderer/assets/ant-reset.less → src/renderer/assets/style/varable.less

 @import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
 
-@primary-color: #ff4ea4; // 全局主色
-@link-color: #ff4ea4; // 链接色
-@error-color: #ff4ea4; // 错误色
+@primary-color: #fc5531; // 全局主色
+@link-color: #fc5531; // 链接色
+@error-color: #fc5531; // 错误色
 .ant-tag-green {
-  color: #ff4ea4;
+  color: #fc5531;
   background: rgba(255, 159, 180, 0.3);
-  border-color: #ff9fb4;
+  border-color: #fd886f;
 }
+@border-color: #e8e8e8;
\ No newline at end of file

src/renderer/main.js

@@ -7,7 +7,7 @@ import router from "./router";
 import store from "./store";
 import Antd from "ant-design-vue";
 
-import "./assets/ant-reset.less";
+import "./assets/style/varable.less";
 
 const opConfig = remote.getGlobal("opConfig");
 

src/renderer/pages/search/index.vue

@@ -16,7 +16,7 @@
         </a-menu-item>
         <a-menu-item key="settings">
           <a-icon type="setting"/>
-          设置
+          账号与设置
         </a-menu-item>
       </a-menu>
     </div>

src/renderer/pages/search/subpages/settings.vue

 <template>
   <div class="pg-settings">
     <div class="dev-detail">
-      <a-menu
-        v-model="currentSelect"
-        style="width: 256px; height: 100%"
-        mode="vertical"
-      >
-        <a-menu-item :key="0">
-          偏好设置
-        </a-menu-item>
-        <a-menu-item :key="1">
-          超级面板
-        </a-menu-item>
-        <a-menu-item :key="2">
-          全局快捷键
-        </a-menu-item>
-      </a-menu>
+      <div class="user-panel">
+        <template v-if="config.userInfo">
+          <a-avatar :size="64" :src="config.userInfo.avatar" />
+          <div class="username">{{ userInfo.UserNick }}</div>
+          <a-popconfirm
+            title="确认退出?"
+            ok-text="确定"
+            cancel-text="取消"
+            placement="right"
+            @confirm="logout"
+          >
+            <a-button icon="logout" size="small">退出</a-button>
+          </a-popconfirm>
+        </template>
+        <template v-else>
+          <a-avatar @click="login" :size="64" icon="user" />
+          <a-button @click="login" size="small">登录</a-button>
+        </template>
+      </div>
       <div class="settings-detail">
-        <div v-if="currentSelect[0] === 0">
-          <div class="setting-item">
-            <div class="title">
-              快捷键(需要使用 option/ctrl/shift/command 键修饰)
-            </div>
-            <div class="settings-item-li">
-              <div class="label">显示/隐藏快捷键</div>
-              <div
-                class="value"
-                tabIndex="-1"
-                @keyup="(e) => changeShortCut(e, 'showAndHidden')"
-              >
-                {{ config.perf.shortCut.showAndHidden }}
-              </div>
-            </div>
-            <div class="settings-item-li">
-              <div class="label">插件分离快捷键</div>
-              <div
-                class="value"
-                tabIndex="-1"
-                @keyup="(e) => changeShortCut(e, 'separate')"
-              >
-                {{ config.perf.shortCut.separate }}
-              </div>
-            </div>
-            <div class="settings-item-li">
-              <div class="label">返回主界面</div>
-              <div
-                class="value"
-                tabIndex="-1"
-                @keyup="(e) => changeShortCut(e, 'quit')"
-              >
-                {{ config.perf.shortCut.quit }}
-              </div>
-            </div>
+        <!-- <div v-if="currentSelect[0] === 0"> -->
+        <div class="setting-item">
+          <div class="title">
+            快捷键(需要使用 option/ctrl/shift/command 键修饰)
           </div>
-          <div class="setting-item">
-            <div class="title">通用</div>
-            <div class="settings-item-li">
-              <div class="label">开机启动</div>
-              <a-switch
-                v-model:checked="config.perf.common.start"
-                checked-children="开"
-                un-checked-children="关"
-              ></a-switch>
+          <div class="settings-item-li">
+            <div class="label">显示/隐藏快捷键</div>
+            <div
+              class="value"
+              tabIndex="-1"
+              @keyup="e => changeShortCut(e, 'showAndHidden')"
+            >
+              {{ config.perf.shortCut.showAndHidden }}
             </div>
-            <div class="settings-item-li">
-              <div class="label">空格执行</div>
-              <a-switch
-                v-model:checked="config.perf.common.space"
-                checked-children="开"
-                un-checked-children="关"
-              ></a-switch>
+          </div>
+          <div class="settings-item-li">
+            <div class="label">插件分离快捷键</div>
+            <div
+              class="value"
+              tabIndex="-1"
+              @keyup="e => changeShortCut(e, 'separate')"
+            >
+              {{ config.perf.shortCut.separate }}
             </div>
           </div>
-          <div class="setting-item">
-            <div class="title">本地搜索启动</div>
-            <div class="settings-item-li">
-              <div class="label">搜索启动应用&文件</div>
-              <a-switch
-                v-model:checked="config.perf.local.search"
-                checked-children="开"
-                un-checked-children="关"
-              ></a-switch>
+          <div class="settings-item-li">
+            <div class="label">返回主界面</div>
+            <div
+              class="value"
+              tabIndex="-1"
+              @keyup="e => changeShortCut(e, 'quit')"
+            >
+              {{ config.perf.shortCut.quit }}
             </div>
           </div>
         </div>
-        <div v-if="currentSelect[0] === 1">
-          <div class="setting-item">
-            <div class="title">弹出面板</div>
-            <a-select value="mouseRight" style="width: 200px" disabled>
-              <a-select-option value="mouseRight">长按鼠标右键</a-select-option>
-            </a-select>
+        <div class="setting-item">
+          <div class="title">通用</div>
+          <div class="settings-item-li">
+            <div class="label">开机启动</div>
+            <a-switch
+              v-model:checked="config.perf.common.start"
+              checked-children="开"
+              un-checked-children="关"
+            ></a-switch>
           </div>
-          <div class="setting-item">
-            <div class="title">长按以下设置的毫秒响应</div>
-            <a-slider
-              :step="100"
-              v-model:value="config.superPanel.mouseDownTime"
-              :min="200"
-              :max="1000"
-            />
+          <div class="settings-item-li">
+            <div class="label">空格执行</div>
+            <a-switch
+              v-model:checked="config.perf.common.space"
+              checked-children="开"
+              un-checked-children="关"
+            ></a-switch>
           </div>
         </div>
-        <div v-if="currentSelect[0] === 2">
-          <a-collapse>
-            <a-collapse-panel key="1" header="说明及示例">
-              <div>
-                按下快捷键，自动搜索对应关键字，当关键字结果完全匹配，且结果唯一时，会直接指向该功能。
-              </div>
-              <h3 style="margin-top: 10px;">示例</h3>
-              <a-divider style="margin: 5px 0;" />
-              <a-list item-layout="horizontal" :data-source="examples">
-                <a-list-item slot="renderItem" slot-scope="item, index">
-                  <a-list-item-meta :description="item.desc">
-                    <div slot="title">{{ item.title }}</div>
-                  </a-list-item-meta>
-                </a-list-item>
-              </a-list>
-            </a-collapse-panel>
-          </a-collapse>
-          <div class="feature-container">
-            <div class="keywords item">
-              <div>快捷键</div>
-              <a-tooltip placement="top" trigger="click">
-                <template slot="title">
-                  <span
-                    >先按功能键（Ctrl、Shift、Alt、Option、Command），再按其他普通键。或按
-                    F1-F12 单键</span
-                  >
-                </template>
-                <div
-                  v-for="(item, index) in config.global"
-                  class="value"
-                  tabIndex="-1"
-                  @keyup="(e) => changeGlobalKey(e, index)"
-                >
-                  {{ item.key }}
-                </div>
-              </a-tooltip>
+        <div class="setting-item">
+          <div class="title">本地搜索启动</div>
+          <div class="settings-item-li">
+            <div class="label">搜索启动应用&文件</div>
+            <a-switch
+              v-model:checked="config.perf.local.search"
+              checked-children="开"
+              un-checked-children="关"
+            ></a-switch>
+          </div>
+        </div>
+        <!-- </div> -->
+        <!-- <div v-if="currentSelect[0] === 1"> -->
+        <div class="setting-item">
+          <div class="title">弹出面板</div>
+          <a-select value="mouseRight" style="width: 200px" disabled>
+            <a-select-option value="mouseRight">长按鼠标右键</a-select-option>
+          </a-select>
+        </div>
+        <div class="setting-item">
+          <div class="title">长按以下设置的毫秒响应</div>
+          <a-slider
+            :step="100"
+            v-model:value="config.superPanel.mouseDownTime"
+            :min="200"
+            :max="1000"
+          />
+        </div>
+        <!-- </div> -->
+        <!-- <div v-if="currentSelect[0] === 2"> -->
+        <a-collapse>
+          <a-collapse-panel key="1" header="说明及示例">
+            <div>
+              按下快捷键，自动搜索对应关键字，当关键字结果完全匹配，且结果唯一时，会直接指向该功能。
             </div>
-            <div class="short-cut item">
-              <div>功能关键字</div>
-              <a-input
-                :value="item.value"
+            <h3 style="margin-top: 10px">示例</h3>
+            <a-divider style="margin: 5px 0" />
+            <a-list item-layout="horizontal" :data-source="examples">
+              <a-list-item slot="renderItem" slot-scope="item, index">
+                <a-list-item-meta :description="item.desc">
+                  <div slot="title">{{ item.title }}</div>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-collapse-panel>
+        </a-collapse>
+        <div class="feature-container">
+          <div class="keywords item">
+            <div>快捷键</div>
+            <a-tooltip placement="top" trigger="click">
+              <template slot="title">
+                <span
+                  >先按功能键（Ctrl、Shift、Alt、Option、Command），再按其他普通键。或按
+                  F1-F12 单键</span
+                >
+              </template>
+              <div
                 v-for="(item, index) in config.global"
+                :key="index"
                 class="value"
-                :disabled="!item.key"
-                @change="(e) => changeGlobalValue(index, e.target.value)"
-              />
-            </div>
+                tabIndex="-1"
+                @keyup="e => changeGlobalKey(e, index)"
+              >
+                {{ item.key }}
+              </div>
+            </a-tooltip>
+          </div>
+          <div class="short-cut item">
+            <div>功能关键字</div>
+            <a-input
+              :value="item.value"
+              :key="index"
+              v-for="(item, index) in config.global"
+              class="value"
+              :disabled="!item.key"
+              @change="e => changeGlobalValue(index, e.target.value)"
+            />
           </div>
-          <div @click="addConfig" class="add-global">+ 新增全局快捷功能</div>
         </div>
+        <div @click="addConfig" class="add-global">+ 新增全局快捷功能</div>
+        <!-- </div> -->
+        <!-- <div v-if="currentSelect[0] === 3"> -->
+
+        <!-- </div> -->
       </div>
     </div>
   </div>
@@ -159,27 +168,61 @@
 <script>
 import keycodes from "../../../assets/keycode";
 import { ipcRenderer, remote } from "electron";
-
+import axios from "axios";
 const opConfig = remote.getGlobal("opConfig");
 
 export default {
   data() {
     return {
-      currentSelect: [0],
+      currentSelect: [3],
       config: { ...opConfig.get() },
       examples: [
         {
           title: "快捷键 「 Alt + W」 关键字 「 微信」",
-          desc: "按下Alt + W 直接打开本地微信应用",
+          desc: "按下Alt + W 直接打开本地微信应用"
         },
         {
           title: "快捷键 「 Alt + Q」 关键字 「 取色」",
-          desc: "按下Alt + Q 直接打开屏幕取色功能",
-        },
-      ],
+          desc: "按下Alt + Q 直接打开屏幕取色功能"
+        }
+      ]
     };
   },
+  computed: {
+    userInfo() {
+      return this.config.userInfo;
+    }
+  },
+  mounted() {
+    ipcRenderer.on("setUserInfo", (e, info) => {
+      this.config.userInfo = info;
+    });
+  },
+  created() {},
   methods: {
+    login() {
+      ipcRenderer.send("login");
+    },
+    logout() {
+      opConfig.set("userInfo", "");
+      this.config.userInfo = "";
+      ipcRenderer.send("logout");
+    },
+    getUserInfo() {
+      axios
+        .post(
+          "http://internalapi.csdn.net/uc/userinfo/userinfo/getdetailbyusername",
+          {
+            username: this.userInfo.UserName
+          }
+        )
+        .then(res => {
+          console.log(res);
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
     changeShortCut(e, key) {
       let change = false;
       if (e.altKey && e.keyCode !== 18) {
@@ -206,7 +249,7 @@ export default {
     addConfig() {
       this.config.global.push({
         key: "",
-        value: "",
+        value: ""
       });
     },
     changeGlobalKey(e, index) {
@@ -236,7 +279,7 @@ export default {
     },
     changeGlobalValue(index, value) {
       this.$set(this.config.global[index], "value", value);
-    },
+    }
   },
   watch: {
     config: {
@@ -246,13 +289,14 @@ export default {
         opConfig.set("superPanel", this.config.superPanel);
         opConfig.set("global", this.config.global);
         ipcRenderer.send("re-register");
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>
 
 <style lang="less">
+@import "../../../assets/style/varable.less";
 .pg-settings {
   height: calc(~"100vh - 110px");
   overflow: auto;
@@ -261,6 +305,26 @@ export default {
     display: flex;
     align-items: flex-start;
     background: #fff;
+    .user-panel {
+      width: 220px;
+      height: 100%;
+      text-align: center;
+      padding: 20px 0;
+      box-sizing: border-box;
+      border-right: 1px solid @border-color;
+      .ant-avatar {
+        cursor: pointer;
+      }
+      .ant-btn {
+        display: block;
+        margin: 20px auto;
+      }
+      .username {
+        font-size: 14px;
+        font-weight: bold;
+        margin: 10px 0 20px;
+      }
+    }
   }
   .settings-detail {
     padding: 20px;

static/preload.js

@@ -299,4 +299,5 @@ window.exports &&
   ipcRenderer.sendToHost("templateConfig", {
     config: JSON.parse(JSON.stringify(window.exports)),
   });
+
 window.ipcRenderer = ipcRenderer;