feat: Add Popup and PopupWindow examples and update chat interface

- Add comprehensive examples for Popup.ui and PopupWindow.ui components
- Update chat.ui to use PopupWindow for better desktop-like experience
- PopupWindow provides draggable, resizable application windows with title bar
- Popup provides modal/non-modal popup layers with auto-dismiss support
- Both components support proper event handling and lifecycle management
- Examples demonstrate real-world usage patterns for hermes-web-cli module
This commit is contained in:
yumoqing 2026-04-21 13:47:40 +08:00
parent 8836aee98d
commit 5399546114
3 changed files with 171 additions and 55 deletions

71
examples/Popup.ui Normal file
View File

@ -0,0 +1,71 @@
{
"widgettype": "Popup",
"options": {
"title": "弹出层示例",
"width": "400px",
"height": "300px",
"auto_open": true,
"modal": true,
"movable": true,
"resizable": false
},
"subwidgets": [
{
"widgettype": "Text",
"options": {
"text": "这是一个 Popup 弹出层",
"fontSize": "18px"
}
},
{
"widgettype": "Form",
"options": {
"fields": [
{
"name": "message",
"label": "消息内容",
"uitype": "text"
}
]
}
},
{
"widgettype": "HBox",
"subwidgets": [
{
"widgettype": "Filler"
},
{
"widgettype": "Button",
"options": {
"text": "确定"
},
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "method",
"target": "-@Popup",
"method": "dismiss"
}
]
},
{
"widgettype": "Button",
"options": {
"text": "取消"
},
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "method",
"target": "-@Popup",
"method": "dismiss"
}
]
}
]
}
]
}

64
examples/PopupWindow.ui Normal file
View File

@ -0,0 +1,64 @@
{
"widgettype": "PopupWindow",
"options": {
"title": "应用窗口示例",
"width": "600px",
"height": "400px",
"auto_open": true,
"movable": true,
"resizable": true,
"modal": false
},
"subwidgets": [
{
"widgettype": "VBox",
"options": {
"width": "100%",
"height": "100%"
},
"subwidgets": [
{
"widgettype": "Text",
"options": {
"text": "这是一个可拖拽、可调整大小的应用窗口",
"fontSize": "20px"
}
},
{
"widgettype": "TabPanel",
"options": {
"tab_pos": "top",
"items": [
{
"name": "tab1",
"label": "内容1",
"content": {
"widgettype": "Text",
"options": {
"text": "第一个标签页的内容"
}
}
},
{
"name": "tab2",
"label": "内容2",
"content": {
"widgettype": "Form",
"options": {
"fields": [
{
"name": "input1",
"label": "输入框",
"uitype": "str"
}
]
}
}
}
]
}
}
]
}
]
}

View File

@ -1,3 +1,15 @@
{
"widgettype": "PopupWindow",
"options": {
"title": "{{params_kw.get('service_name')}} - {{params_kw.get('session_name')}}",
"width": "800px",
"height": "600px",
"auto_open": true,
"movable": true,
"resizable": true,
"modal": false
},
"subwidgets": [
{
"widgettype": "VBox",
"options": {
@ -5,39 +17,6 @@
"height": "100%"
},
"subwidgets": [
{
"widgettype": "HBox",
"options": {
"height": "60px"
},
"subwidgets": [
{
"widgettype": "Text",
"options": {
"text": "{{params_kw.get('service_name')}} - {{params_kw.get('session_name')}}",
"fontSize": "20px"
}
},
{
"widgettype": "Filler"
},
{
"widgettype": "Button",
"options": {
"text": "关闭会话"
},
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "method",
"target": "-@Modal",
"method": "dismiss"
}
]
}
]
},
{
"widgettype": "Filler",
"subwidgets": [
@ -76,3 +55,5 @@
}
]
}
]
}