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"
})
/**
* 内置浏览器 - 显示更多菜单
*/
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;
}
/* 浏览器打开 */
.nav-browser {
/* 更多菜单 */
.nav-more {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 14px;
margin: 0 2px;
@ -148,14 +149,15 @@ body {
-webkit-app-region: none;
}
.nav-browser span {
display: inline-block;
.nav-more svg {
width: 18px;
height: 18px;
background-size: 94%;
background-position: center;
background-repeat: no-repeat;
background-image: url(../image/link/light_selected.svg);
color: #000000;
opacity: 0.7;
}
.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));
}
.nav-browser span {
background-image: url(../image/link/dark_selected.svg);
.nav-more svg {
color: #C7C7C7;
}
.tab-icon::before {

View File

@ -29,8 +29,8 @@
<div class="tab-close" @click.stop="onClose(item)"></div>
</li>
</ul>
<div v-if="canBrowser" class="nav-browser" @click="onBrowser">
<span></span>
<div class="nav-more" @click="onShowMenu">
<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>
@ -513,10 +513,10 @@
},
/**
* 打开浏览器
* 显示更多菜单
*/
onBrowser() {
this.sendMessage('webTabExternal')
onShowMenu() {
this.sendMessage('webTabShowMenu', {windowId: this.windowId, tabId: this.activeId})
},
/**