perf: 优化内置浏览器

electron/electron-menu.js

@@ -17,6 +17,11 @@ const PERMITTED_URL_SCHEMES = ["http:", "https:", MAILTO_PREFIX];
 
 const electronMenu = {
     language: {
+        copy: "复制",
+        back: "后退",
+        forward: "前进",
+        reload: "重新加载",
+        print: "打印",
         openInBrowser: "在浏览器中打开",
         saveImageAs: "图片存储为...",
         copyImage: "复制图片",
@@ -116,77 +121,100 @@ const electronMenu = {
         }
     },
 
-    webContentsMenu(webContents) {
+    webContentsMenu(webContents, isBrowser = false) {
         webContents.on("context-menu", function (e, params) {
+            const popupMenu = new Menu();
             if (params.linkURL || params.srcURL) {
                 const url = params.linkURL || params.srcURL;
-                const popupMenu = new Menu();
 
                 if (!electronMenu.isBlobOrDataUrl(url) && !utils.isLocalAssetPath(url)) {
-                    popupMenu.append(
+                    popupMenu.append(new MenuItem({
-                        new MenuItem({
+                        label: electronMenu.language.openInBrowser,
-                            label: electronMenu.language.openInBrowser,
+                        click: async function () {
-                            accelerator: "o",
+                            electronMenu.safeOpenURL(url);
-                            click() {
+                        },
-                                electronMenu.safeOpenURL(url);
+                    }));
-                            },
-                        }),
-                    );
                 }
 
                 if (params.hasImageContents) {
                     if (!electronMenu.isBlob(url)) {
-                        popupMenu.append(
+                        popupMenu.append(new MenuItem({
-                            new MenuItem({
+                            label: electronMenu.language.saveImageAs,
-                                label: electronMenu.language.saveImageAs,
+                            click: async function () {
-                                accelerator: "s",
+                                await electronMenu.saveImageAs(url, params);
-                                click: async function () {
-                                    await electronMenu.saveImageAs(url, params);
-                                },
-                            }),
-                        );
-                    }
-                    popupMenu.append(
-                        new MenuItem({
-                            label: electronMenu.language.copyImage,
-                            accelerator: "c",
-                            click() {
-                                webContents.copyImageAt(params.x, params.y);
                             },
-                        }),
+                        }));
-                    );
+                    }
+                    popupMenu.append(new MenuItem({
+                        label: electronMenu.language.copyImage,
+                        click: async function () {
+                            webContents.copyImageAt(params.x, params.y);
+                        },
+                    }));
                 }
 
                 if (!electronMenu.isBlobOrDataUrl(url)) {
                     if (url.startsWith(MAILTO_PREFIX)) {
-                        popupMenu.append(
+                        popupMenu.append(new MenuItem({
-                            new MenuItem({
+                            label: electronMenu.language.copyEmailAddress,
-                                label: electronMenu.language.copyEmailAddress,
+                            click: async function () {
-                                accelerator: "a",
+                                clipboard.writeText(url.substring(MAILTO_PREFIX.length));
-                                click() {
+                            },
-                                    clipboard.writeText(url.substring(MAILTO_PREFIX.length));
+                        }));
-                                },
-                            }),
-                        );
                     } else if (!utils.isLocalAssetPath(url)) {
-                        popupMenu.append(
+                        popupMenu.append(new MenuItem({
-                            new MenuItem({
+                            label: params.hasImageContents ? electronMenu.language.copyImageAddress : electronMenu.language.copyLinkAddress,
-                                label: params.hasImageContents ? electronMenu.language.copyImageAddress : electronMenu.language.copyLinkAddress,
+                            click: async function () {
-                                accelerator: "a",
+                                clipboard.writeText(url);
-                                click() {
+                            },
-                                    clipboard.writeText(url);
+                        }));
-                                },
-                            }),
-                        );
                     }
                 }
+            }
 
+            if (isBrowser) {
                 if (popupMenu.items.length > 0) {
-                    popupMenu.popup({});
+                    popupMenu.insert(0, new MenuItem({type: 'separator'}))
-                    e.preventDefault();
                 }
+
+                popupMenu.insert(0, new MenuItem({
+                    label: electronMenu.language.print,
+                    click: () => webContents.print()
+                }))
+
+                popupMenu.insert(0, new MenuItem({
+                    label: electronMenu.language.reload,
+                    click: () => webContents.reload()
+                }))
+
+                popupMenu.insert(0, new MenuItem({
+                    label: electronMenu.language.forward,
+                    enabled: webContents.navigationHistory.canGoForward(),
+                    click: () => webContents.navigationHistory.goForward()
+                }))
+
+                popupMenu.insert(0, new MenuItem({
+                    label: electronMenu.language.back,
+                    enabled: webContents.navigationHistory.canGoBack(),
+                    click: () => webContents.navigationHistory.goBack()
+                }))
+            }
+
+            if (params.selectionText) {
+                if (popupMenu.items.length > 0) {
+                    popupMenu.insert(0, new MenuItem({type: 'separator'}))
+                }
+                popupMenu.insert(0, new MenuItem({
+                    label: electronMenu.language.copy,
+                    role: 'copy'
+                }))
+            }
+
+            if (popupMenu.items.length > 0) {
+                popupMenu.popup({});
+                e.preventDefault();
             }
         })
-    }
+    },
 }
 module.exports = electronMenu;

electron/electron.js

@@ -58,7 +58,7 @@ let childWindow = [],
     mediaType = null,
     webTabWindow = null,
     webTabView = [],
-    webTabHeight = 38;
+    webTabHeight = 40;
 
 let showState = {},
     onShowWindow = (win) => {
@@ -750,6 +750,8 @@ function createWebTabWindow(args) {
     const originalUA = browserView.webContents.session.getUserAgent() || browserView.webContents.getUserAgent()
     browserView.webContents.setUserAgent(originalUA + " SubTaskWindow/" + process.platform + "/" + os.arch() + "/1.0");
 
+    electronMenu.webContentsMenu(browserView.webContents, true)
+
     browserView.webContents.loadURL(args.url).then(_ => { }).catch(_ => { })
 
     webTabWindow.addBrowserView(browserView)

electron/render/tabs/assets/css/style.css

@@ -35,8 +35,8 @@ html, body {
 
 .nav ul {
     display: flex;
-    height: 30px;
+    height: 35px;
-    margin: 8px 46px 0 0;
+    margin: 5px 46px 0 0;
     user-select: none;
     overflow-x: auto;
     overflow-y: hidden;
@@ -51,7 +51,7 @@ html, body {
     position: relative;
     box-sizing: border-box;
     align-items: center;
-    height: 100%;
+    height: calc(100% - 5px);
     padding: 7px 8px;
     margin: 0 8px 0 0;
     min-width: 100px;
@@ -73,31 +73,7 @@ html, body {
 .nav ul li.active {
     color: var(--tab-active-color);
     background: var(--tab-active-background);
-    border-radius: 6px 6px 0 0;
+    border-radius: 4px;
-}
-
-.nav ul li.active::before {
-    position: absolute;
-    bottom: 0;
-    left: -6px;
-    width: 6px;
-    height: 6px;
-    background-image: url(../image/select_left.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    content: '';
-}
-
-.nav ul li.active::after {
-    position: absolute;
-    right: -6px;
-    bottom: 0;
-    width: 6px;
-    height: 6px;
-    background-image: url(../image/select_right.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    content: '';
 }
 
 .nav ul li.active .tab-icon.background {
@@ -247,13 +223,6 @@ body.darwin.full-screen .nav ul {
         --tab-active-background: #575757;
         --tab-close-color: #E3E3E3;
     }
-    .nav ul li.active::before {
-        background-image: url(../image/dark/select_left.png);
-    }
-
-    .nav ul li.active::after {
-        background-image: url(../image/dark/select_right.png);
-    }
 
     .nav ul li.active .tab-icon.background {
         background-image: url(../image/dark/link_normal_selected_icon.png);

resources/assets/js/App.vue

@@ -452,6 +452,11 @@ export default {
             $A.bindScreenshotKey(this.$store.state.cacheKeyboard);
             //
             this.$Electron.sendMessage('setMenuLanguage', {
+                copy: this.$L("复制"),
+                back: this.$L("后退"),
+                forward: this.$L("前进"),
+                reload: this.$L("重新加载"),
+                print: this.$L("打印"),
                 openInBrowser: this.$L("在浏览器中打开"),
                 saveImageAs: this.$L("图片存储为..."),
                 copyImage: this.$L("复制图片"),