高级选项卡入门指南 | web.view 快速入门指南 | 多选项卡切换 flexbox 在线工具
/*
高级选项卡入门指南: https://www.aardio.com/zh-cn/doc/library-guide/std/win/ui/tabs/_.html
web.view 快速入门指南: https://www.aardio.com/zh-cn/doc/library-guide/std/web/view/_.html
多选项卡切换 flexbox 在线工具: https://www.aardio.com/zh-cn/doc/example/WebUI/web.view/OtherApps/flexbox.html
*/
import fonts.fontAwesome;
import win.ui;
/*DSG{{*/
mainForm = win.form(text="高级选项卡操作浏览器控件示例";right=1040;bottom=642;bgcolor=0xFFFFFF;border="none")
mainForm.add(
caption={cls="bkplus";text="AI";left=35;top=12;right=92;bottom=31;color=0xF0CAA6;dl=1;dt=1;font=LOGFONT(h=-16);z=5};
logo={cls="bkplus";text='\uF00B';left=6;top=9;right=35;bottom=34;color=0xF0CAA6;dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=4};
tabButton1={cls="plus";text="Gemini";left=86;top=5;right=195;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF007';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=3};
tabButton2={cls="plus";text="Poe";left=196;top=5;right=283;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF288';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=8};
tabButton3={cls="plus";text="ChatGPT";left=283;top=5;right=400;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF0E6';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=6};
tabButton4={cls="plus";text="lmarena";left=401;top=5;right=511;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF24E';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=7};
tabButton5={cls="plus";text="perplexity";left=512;top=5;right=639;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF002';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=10};
tabButton6={cls="plus";text="translate";left=639;top=5;right=758;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF268';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=9};
tabButton7={cls="plus";text="example";left=759;top=5;right=878;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF268';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=11};
tabPanel={cls="static";left=0;top=40;right=1040;bottom=643;bgcolor=0xFFFFFF;db=1;dl=1;dr=1;dt=1;z=1};
titleBar={cls="bkplus";left=0;top=0;right=1042;bottom=41;bgcolor=0xE48900;dl=1;dr=1;dt=1;z=2}
)
/*}}*/
import win.ui.tabs;
var tabs = win.ui.tabs( mainForm.tabButton1,mainForm.tabButton2,mainForm.tabButton3,mainForm.tabButton4,mainForm.tabButton5,mainForm.tabButton6,mainForm.tabButton7 );
import web.view;
/*
这里的 mainForm.tabPanel 是一个 static 控件，
如果是 custom 控件则会被 win.ui.tabs 自动设为标签页容器。
用 custom 控件创建的标签页容器支持多子窗口，也就支持在子窗口创建多个 web.view 控件以实现打开多个网页。
如果希望只创建一个 web.view 控件实例，用于切换多个网址，可以用下面的方法。
*/
var wb = web.view(mainForm.tabPanel,{
extensions = true;//启用扩展
language = "zh-CN"; //中文语言
startArguments = {
proxyServer = "SOCKS5://127.0.0.1:1081";//指定代理服务器
};
userDataDir = ..io.appData("/aardio/webview2/user-data/" + ..io._exefile);//会话数据目录
})
wb.external = {
sendEnter = function(){
import key
key.press("BACK")
key.press("ENTER")
}
}
wb.onDocumentInit = function(url){
if(url=="https://lmarena.ai/?model=claude-3-5-sonnet-20241022"){
return;
}
//恢复并启用所有选项
tabs.disabledText = null;
}
tabs.onSelChange = function(idx,tab,form){
//当前选项切换到禁用状态并显示动画文本，其他选项自动禁止响应事件。
tabs.disabledText = {'\uF254';'\uF251';'\uF252';'\uF253';'\uF250'}
//因为 tab 已被禁用，默认不会再调用 tab.oncommand
tab.oncommand();
}
mainForm.tabButton1.oncommand = function(){
wb.go("https://aistudio.google.com/prompts/new_chat")
}
mainForm.tabButton2.oncommand = function(){
wb.go("https://poe.com")
}
mainForm.tabButton3.oncommand = function(){
wb.go("https://chatgpt.com/")
}
mainForm.tabButton4.oncommand = function(){
wb.go("https://lmarena.ai/?mode=direct");
//跨页面等待指定节点
wb.waitEle2(`button[role="combobox"][data-sentry-source-file="model-dropdown.tsx"]`);
thread.delay(1000) //稍等 1 秒
//找到节点并模拟点击之
wb.waitEle(`button[role="combobox"][data-sentry-source-file="model-dropdown.tsx"]`,`
this.click()`)
//让网页获得输入焦点
wb.focus()
//获取弹出的 React 下拉框，模拟输入并改变 React 状态值。
wb.waitEle(`input[placeholder="Search models"]`,`
var previousValue = this.value;
this.value = "claude-sonnet-4-20250514";
if(this._valueTracker)this._valueTracker.setValue(previousValue);
//发送事件
this.dispatchEvent(new Event('change', { bubbles: true }));
//调用本地代码发送回车
aardio.sendEnter();`);
tabs.disabledText = null;
}
mainForm.tabButton5.oncommand = function(){
wb.go("https://perplexity.ai")
}
import win.clip;
mainForm.tabButton6.oncommand = function(){
var txt = win.clip.read();
if(#txt && !string.find(txt,":") && string.find(txt,"\a") ){
txt = inet.url.encode(txt);
}
else {
txt = ""
}
wb.go("https://translate.google.com/?hl=zh-CN&sl=en&tl=zh-CN&op=translate&text="+txt);
wb.waitEle("header","this.parentNode.style.display = 'none'");
wb.waitEle("body > c-wiz > div > div","this.style.display = 'none'");
wb.waitEle(".cJ1Ndf","this.style.display = 'none'");
wb.waitEle(".VlPnLc","this.style.display = 'none'");
wb.waitEle("nav","this.parentNode.style.display = 'none';
document.documentElement.scrollTop = document.documentElement.scrollHeight");
}
mainForm.tabButton7.oncommand = function(){
wb.go("https://www.example.com" );
}
wb.cdp("Page.enable");
wb.cdpSubscribe("Page.javascriptDialogOpening",function(dlg){
return function(){
wb.cdp("Page.handleJavaScriptDialog",{accept=true})
if(tabs.selText=="lmarena"){
wb.doScript(`document.documentElement.scrollTop = document.documentElement.scrollHeight;`);
}
}
})
//设置选项卡样式
tabs.skin({
foreground={
active=0xFFFFFFFF;
default=0x00FFFFFF;
hover=0x38FFFFFF
};
color={
default=0xFFFFFFFF;
};
checked={
foreground={default=0xFFFFFFFF;};
color={default=0xFF42A875;};
}
})
import win.ui.simpleWindow;
//为无边框窗口添加窗口标题栏，阴影边框等，最好是放在 mainForm.show() 之前
win.ui.simpleWindow( mainForm );
mainForm.show();
return win.loopMessage();