feat: 标签页新增更多菜单按钮

- 将原浏览器打开按钮替换为更多菜单按钮
  - 添加 more.svg 图标并调整样式
  - 实现 webTabShowMenu 通信接口及菜单框架
This commit is contained in:
kuaifan 2026-01-10 15:47:43 +00:00
parent 4929d44ce7
commit 3b1dce6d67
3 changed files with 73 additions and 15 deletions

56
electron/electron.js vendored
View File

@ -1958,6 +1958,62 @@ ipcMain.on('webTabExternal', (event) => {
event.returnValue = "ok" event.returnValue = "ok"
}) })
/**
* 内置浏览器 - 显示更多菜单
*/
ipcMain.on('webTabShowMenu', (event, args) => {
const windowId = args?.windowId
const windowData = windowId ? webTabWindows.get(windowId) : null
const webTabWindow = windowData?.window
if (!webTabWindow || webTabWindow.isDestroyed()) {
event.returnValue = "ok"
return
}
const item = currentWebTabInWindow(windowId)
const currentUrl = item?.view?.webContents?.getURL() || ''
const menuTemplate = [
{
label: '重新加载',
click: () => {
// TODO: 实现重新加载
}
},
{
label: '复制链接地址',
click: () => {
// TODO: 实现复制链接
}
},
{
label: '默认浏览器打开',
click: () => {
// TODO: 实现默认浏览器打开
}
},
{ type: 'separator' },
{
label: '将标签页移至新窗口',
click: () => {
// TODO: 实现移至新窗口
}
},
{ type: 'separator' },
{
label: '打印',
click: () => {
// TODO: 实现打印
}
}
]
const menu = Menu.buildFromTemplate(menuTemplate)
menu.popup({ window: webTabWindow })
event.returnValue = "ok"
})
/** /**
* 内置浏览器 - 打开开发者工具 * 内置浏览器 - 打开开发者工具
*/ */

View File

@ -135,11 +135,12 @@ body {
content: none; content: none;
} }
/* 浏览器打开 */ /* 更多菜单 */
.nav-browser { .nav-more {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
height: 40px; height: 40px;
padding: 0 14px; padding: 0 14px;
margin: 0 2px; margin: 0 2px;
@ -148,14 +149,15 @@ body {
-webkit-app-region: none; -webkit-app-region: none;
} }
.nav-browser span { .nav-more svg {
display: inline-block;
width: 18px; width: 18px;
height: 18px; height: 18px;
background-size: 94%; color: #000000;
background-position: center; opacity: 0.7;
background-repeat: no-repeat; }
background-image: url(../image/link/light_selected.svg);
.nav-more:hover svg {
opacity: 1;
} }
/* 图标 */ /* 图标 */
@ -390,8 +392,8 @@ body.darwin.full-screen .nav {
background-image: var(--tab-icon-image, url(../image/earth/dark_selected.svg)); background-image: var(--tab-icon-image, url(../image/earth/dark_selected.svg));
} }
.nav-browser span { .nav-more svg {
background-image: url(../image/link/dark_selected.svg); color: #C7C7C7;
} }
.tab-icon::before { .tab-icon::before {

View File

@ -29,8 +29,8 @@
<div class="tab-close" @click.stop="onClose(item)"></div> <div class="tab-close" @click.stop="onClose(item)"></div>
</li> </li>
</ul> </ul>
<div v-if="canBrowser" class="nav-browser" @click="onBrowser"> <div class="nav-more" @click="onShowMenu">
<span></span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g fill="none"><path d="M9.5 16a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0zm9 0a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0zm6.5 2.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5z" fill="currentColor"></path></g></svg>
</div> </div>
</div> </div>
</div> </div>
@ -513,10 +513,10 @@
}, },
/** /**
* 打开浏览器 * 显示更多菜单
*/ */
onBrowser() { onShowMenu() {
this.sendMessage('webTabExternal') this.sendMessage('webTabShowMenu', {windowId: this.windowId, tabId: this.activeId})
}, },
/** /**