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:
parent
8836aee98d
commit
5399546114
71
examples/Popup.ui
Normal file
71
examples/Popup.ui
Normal 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
64
examples/PopupWindow.ui
Normal 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,74 +1,55 @@
|
|||||||
{
|
{
|
||||||
"widgettype": "VBox",
|
"widgettype": "PopupWindow",
|
||||||
"options": {
|
"options": {
|
||||||
"width": "100%",
|
"title": "{{params_kw.get('service_name')}} - {{params_kw.get('session_name')}}",
|
||||||
"height": "100%"
|
"width": "800px",
|
||||||
|
"height": "600px",
|
||||||
|
"auto_open": true,
|
||||||
|
"movable": true,
|
||||||
|
"resizable": true,
|
||||||
|
"modal": false
|
||||||
},
|
},
|
||||||
"subwidgets": [
|
"subwidgets": [
|
||||||
{
|
{
|
||||||
"widgettype": "HBox",
|
"widgettype": "VBox",
|
||||||
"options": {
|
"options": {
|
||||||
"height": "60px"
|
"width": "100%",
|
||||||
|
"height": "100%"
|
||||||
},
|
},
|
||||||
"subwidgets": [
|
"subwidgets": [
|
||||||
{
|
{
|
||||||
"widgettype": "Text",
|
"widgettype": "Filler",
|
||||||
"options": {
|
"subwidgets": [
|
||||||
"text": "{{params_kw.get('service_name')}} - {{params_kw.get('session_name')}}",
|
|
||||||
"fontSize": "20px"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype": "Filler"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype": "Button",
|
|
||||||
"options": {
|
|
||||||
"text": "关闭会话"
|
|
||||||
},
|
|
||||||
"binds": [
|
|
||||||
{
|
{
|
||||||
"wid": "self",
|
"widgettype": "LLMOut",
|
||||||
"event": "click",
|
"options": {
|
||||||
"actiontype": "method",
|
"data_url": "/api/hermes-web-cli/sessions/{{params_kw.get('session_id')}}/messages",
|
||||||
"target": "-@Modal",
|
"auto_scroll": true
|
||||||
"method": "dismiss"
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype": "Filler",
|
|
||||||
"subwidgets": [
|
|
||||||
{
|
{
|
||||||
"widgettype": "LLMOut",
|
"widgettype": "HBox",
|
||||||
"options": {
|
"options": {
|
||||||
"data_url": "/api/hermes-web-cli/sessions/{{params_kw.get('session_id')}}/messages",
|
"height": "80px"
|
||||||
"auto_scroll": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype": "HBox",
|
|
||||||
"options": {
|
|
||||||
"height": "80px"
|
|
||||||
},
|
|
||||||
"subwidgets": [
|
|
||||||
{
|
|
||||||
"widgettype": "Input",
|
|
||||||
"options": {
|
|
||||||
"placeholder": "输入您的消息...",
|
|
||||||
"width": "100%",
|
|
||||||
"height": "60px"
|
|
||||||
},
|
},
|
||||||
"binds": [
|
"subwidgets": [
|
||||||
{
|
{
|
||||||
"wid": "self",
|
"widgettype": "Input",
|
||||||
"event": "keydown",
|
"options": {
|
||||||
"actiontype": "script",
|
"placeholder": "输入您的消息...",
|
||||||
"script": "if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); /* 发送消息逻辑 */ }"
|
"width": "100%",
|
||||||
|
"height": "60px"
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "keydown",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); /* 发送消息逻辑 */ }"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user